前端请求响应拦截

前端 

背景：前端向后端发请求，每次请求响应回来，要判断请求状态并处理，显示消息提示用户，每个请求都写一样的处理，太过冗余，于是编写一个请求响应拦截器，统一处理。

完整代码： 

import axios from 'axios'
//消息提示，之前在页面中可以this.$message去调用，进行消息提示
//但那是在vue组件里，所以可以这么用。现在我们是在js中，所以我
//们要单独引入Message组件
import { Message } from 'element-ui'
//引入路由
import router from '../router'

//对axios请求的响应进行拦截
axios.interceptors.response.use(success => {
    //这里的success代表访问接口成功，但不代表后端返回的状态码就是200，也就是说不代表业务逻辑是对的，只是访问成功了。
    //后端接口有可能不给你做这个操作，提示你错误。

    if(success.status && success.status == 200){
        //success.data就是后端返回的json对象
        //业务逻辑有错
        if(success.data.code == 500 || success.data.code == 401 || success.data.code == 403){
            //error()要求传入message对象。我们直接把后端给的提示信息提示出去。
            Message.error({message:success.data.message});
            return;
        }
        //成功的
        //判断一下，有信息再给提示
        if(success.data.message){
            Message.success({message:success.data.message});
        }  
    }
    return success.data;
},error => {
    //完全就没访问到后端接口
    //服务器直接挂了，success可以通过.data拿到后端的json数据，但error连接口都没访问到，只能.response.code拿http状态码了，提示信息也只能自己写咯。
    //这也适用于后端没有处理错误业务逻辑，导致直接返回的就是500状态码，也就进了这里面吧。后端要是处理了错误业务逻辑，写了公共返回类，就会返回公共返回类
    //只是里面的状态码会告诉你业务逻辑有错，这时接口访问是成功的，但后端给的状态码是错误的，就走上面success里。
    if(error.response.code == 504 || error.response.code == 404 || error.response.code == 500){
        Message.error({message:'服务器被吃了( ╯□╰ )'});
    }else if(error.response.code == 403){
        Message.error({message:'权限不足，请联系管理员!'});
    }else if(error.response.code == 401){
        Message.error({message:'尚未登录，请登录'});
        //没登录，跳转到登录页面
        router.replace('/');
    }else{
        if(error.response.data.message){
            Message.error({message:error.response.data.message});
        }else{
            Message.error({message:'未知错误'});
        }
    }
    return;
});

测试：

输入错误验证码，测试

可以看到，请求接口是访问成功的，HTTP状态码为200，但后端返回状态码为500，证明业务逻辑有错，于是消息提示后端返回的message。

后端

返回类

逻辑处理