在使用Axios进行前后端数据交互的过程中，总是会遇到在请求头中添加数据或者统一响应状态码的情况，因此为了以后能够直接CV，特此记录一下。

本文主要有以下内容：

请求拦截器配置

响应拦截器配置

前置条件：在项目工程中引入了axios库，如果没有引入，可执行如下命令进行安装。

bash 复制代码

yarn add axios

新建AxiosUtil.js文件，在文件中引入Axios

js 复制代码

import axios from 'axios'
// 全局消息提示封装
import messageUtil from './MessageUtil';
// 基本配置
const axiosUtil = axios.create({
    baseURL: 'http://localhost:8080', //请求后端数据的基本地址，自定义
    timeout: 5000                   //请求超时设置，单位ms
})

统一请求处理

场景：在前后端分离的项目中，后端需要前端在请求头中传递token参数，用于验证请求是否合法，如果前端在每一个请求里面去单独配置，这样虽然可以实现这个需求，但是当后端请求参数发生变化或者需要在请求头中添加额外的参数，这样维护起来就比较麻烦了，因此可采用如下统一配置的方式进行配置

js 复制代码

axiosUtil.interceptors.request.use(config => {
    if (config.push === '/') {
        // 这里处理不需要携带token的请求，如放过登录请求
    } else {
        // 在请求头加入token，名字要和后端接收请求头的token名字一样，在这里传递的是`Authorization`
        const token = useUserInfo().getToken,
        config.headers.Authorization = token
    }
    return config;
},
(error) => { 
    // 这里暂时没有找到主动触发的方法，
    return Promise.reject(error);});

第一个箭头函数触发的时机在请求发送之前，我们就可以在这块逻辑里面，我们可以做一些我们想做的事情。

第二个箭头函数是处理请求发生错误的情况。这个函数目前没有找到主动触发的情况。这里是官网推荐写法。

统一响应处理

人生总不是一帆风顺的，http请求也大抵如此，为了能够取得相对较好的用户体验，我们总是需要做一些错误处理，用以优化用户体验，不仅如此，我们还需要分清楚错在了哪里，是http server 500还是401权鉴token过期。

js 复制代码

axiosUtil.interceptors.response.use(function (response) {
    // 在这我们可以对后端返回的数据进行拆包，如 return response.data;
    return response;
}, function (error) {
    // 在这里进行错误处理
    if (error.response) {
        switch (error.response.status) {
            case 400:
                messageUtil.errorMessage('请求错误')
                // doSomeThing
                break;
            case 401:
                messageUtil.errorMessage('权限校验失败,请重新登录!')
                messageUtil.errorMessage('2s之后将自动跳转登录页面!')
                setTimeout(() => {
                    window.location.href = '/'
                }, 2000)
                break;
            case 403:
                // doSomeThing
                messageUtil.errorMessage('拒绝访问')
                break;
        }
    }
    return Promise.reject(error);
});

在这里我们需要额外注意的是我们判断的是http状态码还是系统开发人员自定义的状态码如下图，如果后端对异常做了统一处理，则需要根据error的返回值具体分析。

假定错误的返回结果如上图所示且对返回值做了统一处理，我们判断的是http状态码，如果我们自己定义的公司内部的统一异常状态码，则应当判断response.data.status，此时这种情况属于是http请求成功，但是server端抛出了一个异常。

【前端】Axios请求和响应拦截器配置

统一请求处理

统一响应处理