axios拦截器-原创手记-慕课网

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

/****** 创建axios实例 ******/
const service = axios.create({
    baseURL: process.env.BASE_URL,  // api的base_url
    timeout: 5000  // 请求超时时间
});

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

/****** request拦截器==>对请求参数做处理 ******/
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)
});

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

/****** respone拦截器==>对响应做处理 ******/
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拦截器