项目中Axios的二次封装

Axios的二次封装大致上可以分为七个步骤：

①创建config.js文件，并在根页面文件index.html中引入，这个文件是用于配置请求路径的，如果项目中有多个请求地址时，直接配置在里面即可，附上文件代码以及引入方式：

//config.js文件
//这里的/api和/loginIp都在vue.config.js文件中配置了代理，请求时会被映射为目标地址
const BASE_URL = '/api'; //常用接口地址ip
const loginIp = '/loginIp'; //登陆功能地址ip

②创建axios.js文件并引入axios，vue，router等，并且配置基本路径（这个是发请求时默认的前缀地址，如果项目中要使用其他配置的地址，在api.js文件中封装时重写baseURL即可）

import axios from 'axios';
import Vue from 'vue';
import router from '../router';
const _axios = axios.create({
//下面这一行忽略注释要写，不然会报错，因为不是es6模块化引入
  // eslint-disable-next-line
  baseURL: BASE_URL,
  timeout: 60000,
  validateStatus() {
    return true;
  }
});

③书写请求拦截器

// 添加请求拦截器
_axios.interceptors.request.use(
  function (config) {
      // 添加token
      const token = localStorage.token;
      config.headers['token'] = token;
      return config;
    },
    function (error) {
      // 对请求错误做些什么
      return Promise.reject(error);
    }
);

④书写响应拦截器

// 添加响应拦截器
_axios.interceptors.response.use(
  function (response) {
    // 对响应返回数据做些什么
    if (response.status === 200) {
      const status = response.data.status;
      if (status !== 200) {
        let message = response.data.msg;
        // 重新登录
        if (status === 406) {
          message = '登录过期，需要重新登陆，2秒后跳转到登录界面！';
          // 清空token
          localStorage.token = '';
          setTimeout(() => {
            //路由跳转到登陆页面
            router.push('/login');
          }, 2000);
        }
        if (status === 407) {
          message = '临时token失效';
        }
        // 请求状态码不是200，展示错误信息
        if(message){
          Vue.prototype.$message({
            type: 'warning',
            message
          });
        }
      }
    }
    return response;
  },
  function (error) {
    // 对响应错误做些什么
    return Promise.reject(error);
  }
);

⑤暴露创建的封装好的_axios实例

export default _axios;

⑥在封装api的js文件中引入并使用即可，引入时注意要引入封装好的axios文件，不要引入到了默认的axios（另一篇文章踩过坑）

import axios from '../plugins/axios'
/* eslint-disable */
//获取用户数据时
const getData=  data => {
    return axios.get('/user/data',{
        params:data,
        //这里演示需要使用到其他地址，而不使用默认的BASE_URL的情况
        baseURL:loginIp
    })
}
export{
    getData
}

⑦最后一步，在需要使用api中封装的方法如getData时，组件中引入使用即可。