关于封装axios网络请求降低代码耦合度详解_Javascript

引言

在项目中直接使用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://codercba.com:1888/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 可以使得网络请求的代码在不同的项目中更易于复用。封装后的模块或类可以被多个模块或项目共享，而不需要重复编写发送网络请求的代码。