Web开发必备：基于Vue/React二次封装Axios的攻略！

本文链接：https://blog.youkuaiyun.com/ZYK187/article/details/145583746

内容回顾

为何要对axios进行二次封装？

如何在项目里对axios进行二次封装？

内容回顾

通过上一篇文章，我们知道了什么是axios以及axios如何使用。这一篇的内容咱们来讲讲为什么要对axios进行二次封装，以及如何在项目里使用。

为何要对axios进行二次封装？

统一配置管理

A.基础 URL 管理：
在一个项目中，通常会有一个固定的 API 基础地址。通过二次封装，可以在封装文件中统一配置这个基础 URL，避免在每个请求中重复书写。例如，当项目上线环境和开发环境的 API 地址不同时，只需要在封装文件中修改基础 URL 的配置，而不用在所有请求代码里逐一更改。
```
const service = axios.create({
    baseURL: process.env.NODE_ENV === 'production'? 'https://prod-api.example.com' : 'https://dev-api.example.com',
    timeout: 5000
});
```
B.超时时间设置：
同样，请求超时时间也可以在封装中统一设置。如果后续需要调整超时时间，直接修改封装文件即可，提高了代码的可维护性。
请求拦截和响应拦截处理

A.请求拦截:
添加请求头：在项目中，很多请求可能都需要携带相同的请求头信息，如身份验证的 token。通过请求拦截器，可以在每次请求发送前自动添加这些信息，避免在每个请求中手动添加。
```
service.interceptors.request.use(
    config => {
        const token = localStorage.getItem('token');
        if (token) {
            config.headers['Authorization'] = `Bearer ${token}`;
        }
        return config;
    },
    error => {
        return Promise.reject(error);
    }
);
```
B.请求参数处理：
可以在请求拦截器中对请求参数进行统一的处理，如格式化数据、添加公共参数等。

C.响应拦截:
错误统一处理：当后端返回错误信息时，可以在响应拦截器中统一处理，避免在每个请求的 catch 块中重复编写错误处理逻辑。例如，根据后端返回的错误码，给出不同的提示信息。
```
service.interceptors.response.use(
    response => {
        const res = response.data;
        if (res.code!== 200) {
            // 统一错误提示
            console.error('请求出错:', res.message);
            return Promise.reject(new Error(res.message));
        }
        return res;
    },
    error => {
        console.error('响应出错:', error);
        return Promise.reject(error);
    }
);
```
D.数据格式统一处理：可以在响应拦截器中对返回的数据进行统一的格式化处理，确保项目中使用的数据格式一致。
代码的复用与简洁性

A.封装请求方法：
将常用的请求方法（如 get、post、put、delete）进行封装，在项目中使用时只需要调用封装好的方法，而不用每次都写 axios.get、axios.post 等，使代码更加简洁。
```
const request = {
    get(url, params) {
        return service.get(url, { params });
    },
    post(url, data) {
        return service.post(url, data);
    }
};
// 使用封装后的方法
request.get('/api/users', { page: 1 }).then(response => {
    console.log(response);
});
```
B.避免重复代码:
在多个地方使用相似的请求逻辑时，二次封装可以避免代码的重复编写，提高开发效率。
适应项目需求定制

A.特殊请求处理:
项目中可能会有一些特殊的请求需求，如文件上传、下载等。通过二次封装，可以针对这些特殊需求进行定制化处理，使代码更符合项目的实际需求。

B.与其他库集成:
在项目中可能会使用到其他的库，如 UI 库中的消息提示组件。通过二次封装，可以方便地将这些库与 axios 集成，如在响应拦截器中使用 UI 库的消息提示组件来显示错误信息。
总结
在前端开发中，对 axios 进行二次封装是一个常见且实用的操作。通过二次封装，可以对请求和响应进行统一处理，如设置请求拦截器添加请求头、处理响应错误等，还能让代码更加简洁、可维护。

如何在项目里对axios进行二次封装？

安装axios
首先确保项目中已经安装了 axios，如果没有安装，可以使用以下命令进行安装：
```
npm install axios
```

创建封装文件
A.在项目中创建一个 request.js 文件，用于对 axios 进行二次封装。

B.以下是封装的代码示例（下载好axios后可直接复制）：

import axios, { AxiosInstance, AxiosError, AxiosResponse, InternalAxiosRequestConfig } from 'axios'; //引入
import {getToken} from '@/utils/auth';  //若有token验证的话可以参考，没有就忽略，建议先注释掉
import { useResponseStore } from '@/store/response'; //判断当前项目启动环境，可以忽略，建议先注释掉

// 改用环境配置文件控制url地址，请到根目录.env.development、.env.staging中配置

const service: AxiosInstance = axios.create({
    timeout: 15000,
    //baseURL:'https://192.168.2.14/', //这个是请求后端服务的地址，目前是注释状态，建议先解除注释
    headers:{
        'Content-Type':'application/json',
    },
});

service.interceptors.request.use(
    (config: InternalAxiosRequestConfig) => {
        const store = useResponseStore() //验证当前环境，可以忽略，建议先注释掉
        config.baseURL = store.requestUrl //根据环境切换请求地址，可以忽略，建议先注释掉
        if (config.url !== 'login' && getToken('token')) { //登陆不需要token
            config.headers['Access-Token'] = getToken('token');//将token添加到后端需要的位置，若没此需求可以忽略，建议先注释掉
        }
        return config; //最后输出config
    },
    (error: AxiosError) => {
        return Promise.reject();
    }
);


service.interceptors.response.use(
    (response: AxiosResponse) => {
        if (response.status === 200) {
            return response;
        } else {
            Promise.reject();
        }
    },
    (error: AxiosError) => {
        console.log(error);
        if (error.response && error.response.status === 401) {
            const store = useResponseStore()
            store.setUnauthorized();
        }
        return Promise.reject();
    }
);

export default service; //导出service

*注意⚠️：这里讲一下上边注释的baseURL：
如果你需要根据不同的环境使用不同的地址，那就将它注释，然后使用上边useResponseStore() 去获取，但是useResponseStore是一个pinia仓库需要你自己去配置获取。如何创建一个pinia仓库。
并且还需要配置这两个.env 文件，所以这里建议大家先按我建议的都注释掉，喜欢钻研或者功底较强的同学可以试着去配置一下，后期我会出一期.env文件的文章，这里有疑惑的,大家留言评论。
.env文件的教程来啦～

代码解释

A.创建 axios 实例：
  使用 axios.create 方法创建一个自定义的 axios 实例 service，可以对其进行一些全局配置，如 baseURL 和 timeout。

B .请求拦截器：
  在请求发送之前，会先经过请求拦截器。可以在请求拦截器中添加一些公共的请求头，如 Authorization 头，用于传递用户的身份信息。

C.响应拦截器：
  在接收到响应之后，会先经过响应拦截器。可以在响应拦截器中对响应数据进行统一处理，如判断请求是否成功，如果失败则给出相应的错误提示。
使用封装后的请求方法（这里我的示例项目加了TS->.ts文件，你们的可能是JS->.js文件）

a.在src目录下创建api文件夹，将接口请求集中分区存放，方便后期维护

b.根据不同的页面创建相对应的文件夹（例如告警页：alarm）

c.在environment.ts新建接口

具体怎么给后端传参，需要你们协商，有好多种。
但这里注意⚠️：get请求不能像post似的用data传。
还有就是：
```
//我截取一部分： 
return request({
        url:'sensorData/page',//这个url是要跟咱们request里写的baseURL拼起来的，通常后端会给你一个完整的url，咱们需要自己去找规律拆分开
        method:'post',
        data:val
    })
```
如何在页面中使用（vue3示例）

A.post方法:

B.get方法: