在vue项目中使用了axios请求数据的一些问题
1.axios异步请求省去了ajax封装很多麻烦，简单好用，并且可以使用拦截器（感觉用处不大），
下面是拦截器的写法

// Add a request interceptor
axios.interceptors.request.use(function (config) {
    // Do something before request is sent
    return config;
  }, function (error) {
    // Do something with request error
    return Promise.reject(error);
  });

// Add a response interceptor
axios.interceptors.response.use(function (response) {
    // Do something with response data
　　if(res.data.code === -1){
　　　　location.href= url + location.href;//code === -1 跳转到buc登录
　　}
　　//return;
    return response;
  }, function (error) {
    // Do something with response error
    return Promise.reject(error);
  });

由于用户登录情况，系统维护状态，正常情况后端返回的数据不同，拦截器里的return response; 改为return;组件的axios仍然执行,1.2情况仍报错

SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。 
//1.请求的数据中，可能没有登录，后台返回 数据如下
{
  code：-1，
  url: "https://login.xxxx.com/ssoLogin.htm?APP_NAME=auto-ci&BACK_URL=",        
}
//2.维护下
{
  maintenance:true,
  message:'系统维护中',
  timestamp:1231231//返回数据的事件戳    
}
//3.登录的数据如下 
{ 　　
　　success:true, 
　　data:{}, 
　　timestamp:1231231，//返回数据的事件戳  
}

但是情况1,2不符合每个组件返回数据response的数据格式，就会error，报 error res.data is not defined 

我设置了如果error 就会用element-ui的message弹信息条，这就导致了每次登录前就会弹一次error信息。客户认为平台出了问题就向开发提出问题。
这样在每一个请求里判断数据就很麻烦

需要集中处理下

function get(url,callback){
        return new Promise((resolve,inject)=>{

            axios.get(url)
            .then(res=>{
                if(res.data.code == -1){
                    location.href = res.data.href + location.href;
                    return;
                }else if(res.data.maintenance){
                    callback(res.data);
                    return;
                }

                resolve(res.data);
                
            })
            .catch(err=>{
                inject(err.message)
            })
            
        })
    }

维护

get('url',res=>{
console.log(res,'callback')//维护下 不使用 promise 直接回调callback
})

正常情况

get('http://localhost:3000/')
    .then(res=>{
        console.log(res,'res')
    })
    .catch(error=>{
        console.log(error)
    })

然后解决问题，

 

扫码关注我们
微信号：SRE实战
拒绝背锅 运筹帷幄