axios拦截器

首先我们可以通过axios.ceate创建一个axios实例,配置一些信息，比如下面就配了baseUrl和过期时间

const service = axios.create({
    baseURL: process.env.base_URL,  // api的base_url
    timeout: 5000  // 请求超时时间
});

然后我们就用axios实例的interceptors属性配置拦截器，可以在请求前拦截，也可以在响应后拦截
请求前拦截

service.interceptors.request.use(config => {
    app.$vux.loading.show({
 text: '数据加载中……'
    });
 
    config.method === 'post'
 ? config.data = qs.stringify({...config.data})
 : config.params = {...config.params};
    config.headers['Content-Type'] = 'application/x-www-form-urlencoded';
 
    return config;
}, error => {  //请求错误处理
    app.$vux.toast.show({
 type: 'warn',
 text: error
    });
    Promise.reject(error)
});

在请求前 拦截我们可以加遮罩或者对请求参数等做一些处理，也可以检测请求过程中出现的错误
响应后处理

service.interceptors.response.use(
    response => {  //成功请求到数据
 app.$vux.loading.hide();
 //这里根据后端提供的数据进行对应的处理
 if (response.data.result === 'TRUE') {
     return response.data;
 } else {
     app.$vux.toast.show({  //常规错误处理
  type: 'warn',
  text: response.data.data.msg
     });
 }
    },
    error => {  //响应错误处理
 console.log('error');
 console.log(error);
 console.log(JSON.stringify(error));
 
 let text = JSON.parse(JSON.stringify(error)).response.status === 404
     ? '404'
     : '网络异常，请重试';
 app.$vux.toast.show({
     type: 'warn',
     text: text
 });
 
 return Promise.reject(error)
    }
);
--------------------- 

响应后拦截我们可以对响应数据进行处理，也可以对响应中出现的错误进行监听

然后export default service;整个拦截器就写完了，用的时候我们引入service调用它的get.post等方法就行

//api.js
import service from './request'
 
export const getPersonInfo = data => {
    return service({
 url: '/person_pay/getpersoninfo',
 method: 'post',
 data
    })
};

参考链接：axios拦截器