封装 Axios

在 @/libs/request.js 路径下对 Axios 进行封装，封装了请求参数，请求头，以及错误提示信息、 request 拦截器、response 拦截器、统一的错误处理、baseURL 设置等。

import axios from 'axios';
import get from 'lodash/get';
import storage from 'store';
// 创建 axios 实例
//封装ajax--
export default function request(obj){
    return new Promise((resolve,reject)=>{
       instance({
          url:obj.url,
          method:obj.method||'get',
          params:obj.params||null,
          data:obj.data||null,
          cancelToken:obj.cancelToken||null,
          ...obj.others
          })
          .then(res=>{
            if(res.data.exceptionCode==302){
             window.location.href=res.data.exceptionMsg;
             return;
            }
            resolve(res.data);
          })
          .catch(err=>{reject(err)});
      });
   }
//其他 页面function a_add(params){
//          return  request({url:'',method:'post',...params})
//          }

const request = axios.create({
 // API 请求的默认前缀
 baseURL: process.env.VUE_APP_BASE_URL,
 timeout: 10000, // 请求超时时间
 withCredentials:true
});

// 异常拦截处理器
const errorHandler = (error) => {
 const status = get(error, 'response.status');
 switch (status) {
 /* eslint-disable no-param-reassign */
 case 400: error.message = '请求错误'; break;
 case 401: error.message = '未授权，请登录'; break;
 case 403: error.message = '拒绝访问'; break;
 case 404: error.message = `请求地址出错:  
 ${error.response.config.url}`; break;
   case 408: error.message = '请求超时'; break;
   case 500: error.message = '服务器内部错误'; break;
   case 501: error.message = '服务未实现'; break;
   case 502: error.message = '网关错误'; break;
   case 503: error.message = '服务不可用'; break;
   case 504: error.message = '网关超时'; break;
   case 505: error.message = 'HTTP版本不受支持'; break;
   default: break;
   /* eslint-disabled */
 }
 return Promise.reject(error);
};

// request interceptor//请求前拦截
request.interceptors.request.use((config) => {
 // 如果 token 存在
 // 让每个请求携带自定义 token 请根据实际情况自行修改
 // eslint-disable-next-line no-param-reassign
 config.headers.Authorization = `bearer  
 ${storage.get('ACCESS_TOKEN')}`;
 
 //请求路由参数设置
 config.params.xxx=''
 return config;
}, errorHandler);

// response interceptor//响应后拦截
request.interceptors.response.use((response) => {
 const dataAxios = response.data;
 // 这个状态码是和后端约定的
 const { code } = dataAxios;
 // 根据 code 进行判断
 if (code === undefined) {
   // 如果没有 code 代表这不是项目后端开发的接口
   return dataAxios;
 // eslint-disable-next-line no-else-return
 } else {
   // 有 code 代表这是一个后端接口 可以进行进一步的判断
   switch (code) {
     case 200:
       // [ 示例 ] code === 200 代表没有错误
       return dataAxios.data;
     case 'xxx':
       // [ 示例 ] 其它和后台约定的 code
       return 'xxx';
     default:
       // 不是正确的 code
       return '不是正确的code';
   }
 }
}, errorHandler);

export default request;

通过 VUE_APP_BASE_URL 区分线上与开发环境的 API 地址。
code 起到一个比较关键的作用，例如 token 过期时的验证。
使用了一个叫 sotre 的包作为本地储存的工具用来存储 token