43-vue项目中配置响应的拦截器

我们发送axios请求时，有时会响应错误信息，比如我们单击登录按钮发送请求的时候，可能会响应错误信息，也可能响应成功。当我们提交表单时，可能会响应错误信息，也可能响应成功。分开来写过于麻烦，所以我们使用axios的拦截器，统一拦截。当我们收到错误/正确信息的时候，对错误/正确信息进行统一的处理和提示。
/
/
/
/
/
在vuecli目录下新建utils文件夹，创建api.js，编写代码

import axios from "axios";  //导入axios
import {ElMessage} from "element-plus"; //导入ElMessage
import router from "../router";

//响应拦截器
axios.interceptors.response.use(success=>{//接口访问成功
    //业务逻辑错误，即页面相应200状态码，但是后端不允许进行的逻辑操作
    if(success.data && success.data == 200){//如果相应码存在且为00
        //data是一个json对象
        if(success.data.code == 500 || success.data.code == 401 || success.data.code == 403){//逻辑错误
            ElMessage.error({message:success.data.message});
        }

        //响应成功
        if(success.data.message){//如果存在响应信息
            ElMessage.success({message:success.data.message});
        }

        return success.data;//返回一个json对象
    }
},error => {//接口访问失败
    //压根没有访问到我们的后端接口，所以也就没有data对象
    if(error.response.code==504 || error.response.code==404){
        ElMessage.error({message:'页面被吃了，( ╯□╰ )'});
    }else if(error.response.code == 403){
        ElMessage.error({message:'权限不足，请联系管理员'});
    }else if(error.response.code == 401){
        ElMessage.error({message:'尚未登录，请登录'});
        //然后跳到登录页
        router.replace('/');
    }else {
        //如果有响应信息
        if(error.response.data.message){
            ElMessage.error({message:error.response.data.message});
        }else {
            ElMessage.error({message:'未知错误'});
        }
    }

    return;
})


/*
发送请求
 */
//传送json格式的请求
var base = ''; //前置请求

export const postRequest = (url, params) => {
    return axios({
        method: 'post',
        url: '${base}${url}',
        data: params
    });
}