(3条消息)Axios在vue项目中的二次封装解析 - halo1416的博客 - CSDN博客

安宇雨 - 随手采集
2019-03-27 01:58:58
随手采集
0000-未整理-等待研究

Axios是什么？

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。是现在在项目中用的较多的并且比较好用的网络库。

Axios用来干什么？

Axios主要是用于向后台发起请求的，还有在请求中做更多是可控功能。我用的比较多的就是请求拦截（避免重复请求）

基本使用请参考官方文档：https://www.kancloud.cn/yunye/axios/234845

下面是曾经一个实际项目中对Axios的二次封装的解析：

1. 引入axios，自定义配置并实例化一个对象 http

2. 配置拦截重复请求的变量与方法

3. 拦截器的配置 ==>> 划重点

3.1 先看看官网的例子，请求拦截 / 响应拦截

3.2 自己封装的请求拦截

3.3 自己封装的响应拦截

4. 请求地址的统一处理（是否使用代理）

5. 请求方式 get / post 的封装

6. 最后导出，并挂载到vue的全局即可

7. 实际使用

7.1 使用post请求

7.2 使用get请求

完整代码

import Vue from 'vue'import axios from 'axios'import router from '@/router'import qs from 'qs'import merge from 'lodash/merge'import { clearLoginInfo } from '@/utils' const http = axios.create({  timeout: 1000 * 30,  withCredentials: true,  headers: {    'Content-Type': 'application/json; charset=utf-8'  }}) // 正在请求的请求url数组let pending = []; // 是否正在请求let isPending = url => pending.includes(url); // 移除完成的请求let removePending = url => {    let index = pending.findIndex(item => item === url);    pending.splice(index, 1);}; /** * 请求拦截 */http.interceptors.request.use(config => {  if(!config.headers.noIntercept && isPending(config.url)) {    //终止请求    console.log(config.url)    return Promise.reject(new Error('重复请求已被拦截!'));  }    pending.push(config.url);  config.headers['token'] = Vue.cookie.get('token') // 请求头带上token  return config}, error => {  return Promise.reject(error)}) /** * 响应拦截 */http.interceptors.response.use(response => {  removePending(response.config.url);  if (response.data && response.data.code === 401) { // 401, token失效    clearLoginInfo()    router.push({ name: 'login' })  }  return response}, error => {  pending = [];  return Promise.reject(error)}) /** * 请求地址处理 * @param {*} actionName action方法名称 */http.adornUrl = (actionName) => {  // 非生产环境 && 开启代理, 接口前缀统一使用[/proxyApi]前缀做代理拦截!  return (process.env.NODE_ENV !== 'production' && process.env.OPEN_PROXY ? '/proxyApi' : window.SITE_CONFIG.baseUrl) + actionName} /** * get请求参数处理 * @param {*} params 参数对象 * @param {*} openDefultParams 是否开启默认参数? */http.adornParams = (params = {}, openDefultParams = true) => {  var defaults = {    't': new Date().getTime()  }  return openDefultParams ? merge(defaults, params) : params} /** * post请求数据处理 * @param {*} data 数据对象 * @param {*} openDefultdata 是否开启默认数据? * @param {*} contentType 数据格式 *  json: 'application/json; charset=utf-8' *  form: 'application/x-www-form-urlencoded; charset=utf-8' */http.adornData = (data = {}, openDefultdata = true, contentType = 'json') => {  var defaults = {    't': new Date().getTime()  }  data = openDefultdata ? merge(defaults, data) : data  return contentType === 'json' ? JSON.stringify(data) : qs.stringify(data)} export default http

文章仅为本人学习过程的一个记录，仅供参考，如有问题，欢迎指出！

Original url: Access
Created at: 2019-03-27 01:58:57
Category: default
Tags: none

未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到