【从0到1打造vue element-ui管理后台 】第二十四课 全局处理Axios请求异常

160 阅读1分钟

第二十四课 全局处理Axios请求异常

一、src/utils/ayaxios.js中修改响应拦截器

//响应拦截器
myaxios.interceptors.response.use(function(response){
    loading.close();
    const resp = response.data
    if(resp.code!=200){
        Message({
            message:resp.message || '系统异常',
            type:"warning",
            duration:5000,
            showClose:true
        })
    }
    return response
},function(error){
    loading.close();
    Message({
        message:error,
        type:"error",
        duration:5000
    })
    return Promise.reject(error)
})  

二、打开server-api/mocks/bookinfolist.js

把code修改成400,模拟出错的情况

/**
 * 信息列表接口
 *
 * @url bookinfolist?currentPage=1&pageSize=1
 *
 */

module.exports = function (req) {
 
  return {
    code: 400,
    flag: false,
    message: "系统异常",
    "data": []
  }
};

image.png