axios 全局设置

vue.js

一个基础的axios全局设置

需要提的一点是,axios 拦截器是可以多个的,并且是可以取消的,在axios内部做的很简单,拦截器就是一个数组,use的时候,就把函数push一下,然后返回数组的下标,移除的时候,就数组的该下标项设置为null

多个拦截器

//增加一个
const ejectId = $axios.interceptors.response.use(res=>{
            return res;
        });
//移除一个
$axios.interceptors.response.eject(ejectId);

全局设置

import $axios from 'axios';

$axios.defaults.withCredentials = true;
$axios.defaults.headers.common['token'] = ''; //webapi 需要的 token
$axios.defaults.timeout = 30000;//超时时间
$axios.defaults.baseURL = ''; //基础api地址
//请求的时候
$axios.interceptors.request.use(config=> {
    return config;
  }, err=> {
    console.error( '请求超时!');
    return Promise.resolve(err);
  })
//返回数据的时候
$axios.interceptors.response.use(res=> {
     //服务器正常返回数据的时候
    if(res.data){
        if (res.data.State == 'Error' && res.data.Message.length > 0) {
            console.error(res.data.Message);
            return res;
        }else if(res.data.State == 'ValidateError' && res.data.Message.length > 0){
            console.error(res.data.Message);
            return res;
        }
    }
    return res;
}, err=> {
    // 服务器错误的时候
    try{
        if(err.response.status == 504||err.response.status == 404) {
            console.error('服务器被吃了⊙﹏⊙∥');
        } else if(err.response.status == 403) {
            console.error('权限不足,请联系管理员!');
        }else{
            console.error('未知错误!');
        }
    }catch(e){

    }
    //返回一个自定义的错误格式
    return Promise.resolve({
        data:{
            data:{
                State:'Error',
                Message:err
            }
        }
    });
})

export default $axios;

说点什么

avatar
  Subscribe  
Notify of