axios拦截404报错_正确使用Axios，提升接口请求幸福感

1 前景介绍

根据Axios中文文档：Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。因其实在是过于简单粗暴，好用的一逼，可以算是目前最流行的前后端数据交互的工具，前端人员基本上每天都在接触它。为达到体感更佳的使用效果，一般不会直接原生使用（当然你硬要原生使用也可以），一般需要做几个简单的二次封装动作。本文旨在通过在vue项目中对axios的二次封装使用做一个笔记，分享一下aiox封装中需要关注的几个点。

「项目代码文件夹大概如下：」

「需要本文前需要说明的是：」

❝

• http文件夹下的index.js文件是对axios封装的文件（本文重点关注讨论这个文件），api文件夹下的文件是使用http接口定义的文件，userStorage.js是跟token和用户信息缓存相关的工具文件。
• 本项目用的是vantUI框架，所以，跟UI相关的（比如Toast），都是导入vant中的，实际可根据具体使用UI框架替换就好（比如用的antd）。
• 虽然是vue项目中封装，但是react项目同理。

❞

2 创建axios实例

创建一个axios实例非常简单，调用create()方法就好了：

const http = axios.create({
    //withCredentials: true, //表示跨域请求时是否需要使用凭证,可根据情况自己设定，我这儿用不上
    timeout: 30000, //设置请求超时时间，单位：ms
    //baseURL:'' //http请求域名,也可以在请求拦截器里面设置
});

3 请求拦截器封装

在我看来，请求拦截器的作用主要有两个：

1、对HTTP请求的Request Headers参数进行全局设置

2、设置接口请求的域名和接口路径，也就是baseURL和url

「其实现代码片段如下：」

http.interceptors.request.use(
    (config) => {
        // config中包含url就是后端给的接口路劲
        let { url } = config;
        // 此处我的开发环境中因为使用了webpack的devServer代理，所以接口域名为空
        let baseURL = '';
        // 生产环境（build之后）的域名是直接从浏览器地址栏截取的
        // 所以做出以下判断，可根据实际情况自行判断不同环境的域名
        const isProd = process.env.NODE_ENV === 'production';
        if (isProd) {
            baseURL = `${document.location.protocol}//${document.location.host}/app`;
        }
        config = {
            ...config,
            baseURL: baseURL,
            url: url,
            headers: {
                Accept: 'application/json',
                'Content-Type': 'application/json; charset=utf-8',
                ...config.headers,
                accessToken: UserStorage.getUaaTokenInfo().accessToken || '', //从缓存中取出登录获取的token
                authType: 'account',
            },
        }; 
        return config;
    },
    (error) => {
        return Promise.reject(error);
    }
);

「最终在network中看到的Request Headers效果如下：」

4 响应拦截器封装

响应拦截器的作用主要是以下两点

1、统一处理接口请求返回数据的后，再返回具体给业务层使用

2、统一处理接口异常状态码情况，统一显示错误信息

❝ 必须说明的是，这块处理的逻辑其实比较灵活，具体要看接口返回的数据是什么格式，根据具体情况来处理，达到以上目的。因为我们接口返回的restful风格，返回的接口格式如下图:
❞