Axios拦截器的使用

发表于:2017-09-04

像下面这样,如果有200次请求,每次请求都这么做的话会非常累,一旦修改非常难以维护

axios.get('/api/user')
.then(res => {
    // 每次都得判断错误码
    switch( res.data.status ) {
        case 200:
        // do something ...
        break;
        case 401:
        // do something...
    }
})
.catch(e => {
    // 然后这里是响应超时或错误处理...
})

用拦截器改装

// 请求拦截器
axios.interceptors.request.use(config => {
    // 每次请求都带上'x-access-token'头
    config.headers['x-access-token'] = 'token';
    // post请求默认发送参数
    if( config.method == 'post' ) {
        config.data = Object.assign({
            userId: '...',
            token: '...'
        }, config.data);
    }
    return config;
}, e => {
    // 发起不了请求,有可能是接口问题
    console.log('接口可能出错');
    return Promise.reject(e);
});

// 响应拦截器
axios.interceptors.response.use(res => {
    // 响应数据
    switch( res.data.status ) {
        case 0:
            console.log('我是0');
        break;
        case 200:
            console.log('我是200');
        break;
        default:
            console.log('其他');
    }
    return res;
}, e => {
    // 超时或错误处理
    console.log('后台还没响应');
    return Promise.reject(e);
});

请求的时候这么用,少写了很多代码

axios.get('/api/user')
.then(data => {
    // 每次只要判断正确状态码就好了
    if( data.data.status == 200 ) {
        console.log(data);
    }
})
// 这个记得要catch,否则捕获不了。 catch交给拦截器处理
.catch(e => e)
JavaScript