引言
在项目中直接使用Axios或其他第三方库来发送网络请求获取数据时，会导致代码与网络请求的逻辑耦合度过高，导致难以维护。
本文将讲解如何将网路请求的代码进行封装来进行解耦操作
理解耦合度
代码耦合分为两种，直接依赖的结构耦合和间接依赖的内容耦合，这两种耦合都会导致可维护性下降、可测试性下降、可复用性下降、可扩展性下降。
这里在项目中直接使用Axios发送网络请求就是结构耦合，如果Axios的第三方库发生更新或者废弃，会导致我们的项目非常难以维护，这时将Axios封装到一个类中，就可以降低这种直接依赖带来的影响
Axios概述
Axios 是一个流行的用于发起 HTTP 请求的 JavaScript 库。它提供了一种简洁、灵活且易于使用的方式来处理网络请求，并且可以在浏览器和Node.js环境中使用。
以下是 Axios 的一些主要功能：
- 支持多种请求方式：Axios 支持常见的 HTTP 请求方法，如 GET、POST、PUT、DELETE 等，可以满足不同类型的请求需求。
- 拦截器支持：Axios 提供了拦截器(Interceptors)功能，可以在请求发送或响应返回之前对它们进行拦截和处理。这使得可以在请求和响应的不同阶段添加全局的处理逻辑，例如认证、错误处理、请求/响应转换等。
- Promise API：Axios 基于 Promise 提供了一致的 API，可以使用链式调用来处理请求和响应。这使得可以更容易地处理异步操作，并使用 Promise 的特性，如 .then()、.catch()、.finally() 等。
- 请求和响应的转换：Axios 允许自定义请求和响应的数据转换逻辑。可以通过拦截器将请求数据格式化为特定格式(如 JSON)，或者将响应数据进行解析和转换，以适应项目的需求。
- 错误处理：Axios 提供了全面的错误处理机制。它会自动检测和处理 HTTP 错误状态码，并将其包装为可读的错误对象。此外，还可以添加自定义的错误处理逻辑，以便更好地处理错误情况。
- 取消请求：Axios 允许取消尚未完成的请求。这对于需要中止或忽略之前发出的请求非常有用，例如在用户取消操作或页面导航时。
Axios 成为流行的发起 HTTP 请求的工具有以下原因：
- 易于使用：Axios 提供了简洁而直观的 API，使得发送和处理 HTTP 请求变得简单和容易上手。
- 广泛的应用：Axios 可以在浏览器和Node.js环境中使用，使得它在前端和后端开发中都具有广泛的适用性。
- 功能丰富：Axios 提供了许多实用的功能，如拦截器、请求和响应的转换、错误处理等，使得开发人员能够更好地控制和处理网络请求。
- 活跃的社区支持：Axios 有一个活跃的社区，拥有广泛的用户群体，因此可以获得广泛的支持和资源。这包括文档、示例代码、问题解答等。
- 总而言之，Axios 是一个功能强大、易于使用且受欢迎的用于发起 HTTP 请求的工具，它提供了许多便捷的功能和良好的开发体验，使得处理网络请求变得更加简单和高效。
封装Axios
在项目目录中创建一个services文件夹来封装网络请求的逻辑。
在services中创建modules文件夹来编写复杂的网络请求逻辑，在request中封装Axios逻辑，创建index文件作为services统一出口。
在request中配置index.js文件封装一个类来处理网络请求，在config.js文件中配置基本选项，例如BASE_URL、TIMEOUT。
配置request中的index.js文件
import axios from "axios";
import { BASE_URL, TIMEOUT } from "./config";
class HYRequest {
// 创建构造函数
constructor(baseURL, timeout) {
// 创建instance实例
this.instance = axios.create({
baseURL,
timeout,
});
// 配置拦截器，对获取数据进行响应
this.instance.interceptors.response.use(
(res) => {
return res.data;
},
(err) => {
return err;
}
);
}
// request请求
request(config) {
return this.instance.request(config);
}
// 配置get请求方法
get(config) {
return this.request({ ...config, method: "get" });
}
// 配置post请求方法
post(config) {
return this.request({ ...config, method: "post" });
}
}
const hyRequest = new HYRequest(BASE_URL, TIMEOUT);
export default hyRequest;
这里通过类的内聚性将网络请求的逻辑汇集到一起，用axios.create函数创建instance实例，构造函数接收baseUrl和timeout来配置instance，通过interceptor拦截器拦截response结果，在通过配置request、get、post实现对Axios的调用来完成网络请求，最后用创建好的类来创建一个实例，接收的参数为在config文件中配置好的基本选项，然后导出这个实例即可在项目代码中进行使用。
- 配置request中的config文件
export const BASE_URL = "http://www.pcppp.com/airbnb/api"; export const TIMEOUT = 10000;
这里简单配置request的基本选项来方便我们发送网络请求
- 对封装好的hyRequest进行导出
import hyRequest from "./request"; export default hyRequest;
这里是services文件夹的统一导出出口，方便进行代码维护
使用这里封装的类进行网络请求
import React, { memo, useEffect } from "react";
import hyRequest from "@/services";
const Home = memo(() => {
// 网络请求的代码
useEffect(() => {
hyRequest.get({ url: "/home/highscore" }).then((res) => {
console.log(res);
});
}, []);
return <div>Home</div>;
});
export default Home;
这里在home组件中先进行导入hyRequest，即可发送网络请求，配置config参数，传入{ url: "/home/highscore" }来发送网络请求。
这便是通过封装好的hyRequest类发送网络请求得到的结果
总结
封装 Axios 的好处：
- 降低代码耦合度：通过封装 Axios，可以将网络请求的具体实现细节隐藏在封装的模块或类中，其他模块只需要与封装后的接口进行交互，从而降低了代码的耦合度。
- 提高可维护性：封装 Axios 可以将网络请求的逻辑集中在一个地方，使得对网络请求的修改和维护更加方便和一致。如果需要更换或升级网络请求库，只需在封装层进行修改，而不需要在整个项目中的各个地方进行修改。
- 增强可测试性：通过封装 Axios，可以更容易地进行单元测试。由于网络请求的逻辑被封装在一个独立的模块或类中，可以方便地模拟请求和响应，编写针对封装层的单元测试。
- 提升代码的可复用性：封装 Axios 可以使得网络请求的代码在不同的项目中更易于复用。封装后的模块或类可以被多个模块或项目共享，而不需要重复编写发送网络请求的代码。
结束语
通过封装Axios来降低项目代码对于Axios的直接依赖，即使后面要更换使用网络请求的第三方库，也可以更加方便的修改和维护代码，在编写项目的时候我们也应该多应用这种思路，合理抽取代码逻辑，使代码更容易维护，提高代码复用性。
