引言

• 在項(xiàng)目中直接使用Axios或其他第三方庫(kù)來(lái)發(fā)送網(wǎng)絡(luò)請(qǐng)求獲取數(shù)據(jù)時(shí)，會(huì)導(dǎo)致代碼與網(wǎng)絡(luò)請(qǐng)求的邏輯耦合度過(guò)高，導(dǎo)致難以維護(hù)。
• 本文將講解如何將網(wǎng)路請(qǐng)求的代碼進(jìn)行封裝來(lái)進(jìn)行解耦操作

理解耦合度

• 代碼耦合分為兩種，直接依賴的結(jié)構(gòu)耦合和間接依賴的內(nèi)容耦合，這兩種耦合都會(huì)導(dǎo)致可維護(hù)性下降、可測(cè)試性下降、可復(fù)用性下降、可擴(kuò)展性下降。
• 這里在項(xiàng)目中直接使用Axios發(fā)送網(wǎng)絡(luò)請(qǐng)求就是結(jié)構(gòu)耦合，如果Axios的第三方庫(kù)發(fā)生更新或者廢棄，會(huì)導(dǎo)致我們的項(xiàng)目非常難以維護(hù)，這時(shí)將Axios封裝到一個(gè)類(lèi)中，就可以降低這種直接依賴帶來(lái)的影響

Axios概述

Axios 是一個(gè)流行的用于發(fā)起 HTTP 請(qǐng)求的 JavaScript 庫(kù)。它提供了一種簡(jiǎn)潔、靈活且易于使用的方式來(lái)處理網(wǎng)絡(luò)請(qǐng)求，并且可以在瀏覽器和Node.js環(huán)境中使用。

以下是 Axios 的一些主要功能：

• 支持多種請(qǐng)求方式：Axios 支持常見(jiàn)的 HTTP 請(qǐng)求方法，如 GET、POST、PUT、DELETE 等，可以滿足不同類(lèi)型的請(qǐng)求需求。

• 攔截器支持：Axios 提供了攔截器（Interceptors）功能，可以在請(qǐng)求發(fā)送或響應(yīng)返回之前對(duì)它們進(jìn)行攔截和處理。這使得可以在請(qǐng)求和響應(yīng)的不同階段添加全局的處理邏輯，例如認(rèn)證、錯(cuò)誤處理、請(qǐng)求/響應(yīng)轉(zhuǎn)換等。

• Promise API：Axios 基于 Promise 提供了一致的 API，可以使用鏈?zhǔn)秸{(diào)用來(lái)處理請(qǐng)求和響應(yīng)。這使得可以更容易地處理異步操作，并使用 Promise 的特性，如 .then()、.catch()、.finally() 等。

• 請(qǐng)求和響應(yīng)的轉(zhuǎn)換：Axios 允許自定義請(qǐng)求和響應(yīng)的數(shù)據(jù)轉(zhuǎn)換邏輯?？梢酝ㄟ^(guò)攔截器將請(qǐng)求數(shù)據(jù)格式化為特定格式（如 JSON），或者將響應(yīng)數(shù)據(jù)進(jìn)行解析和轉(zhuǎn)換，以適應(yīng)項(xiàng)目的需求。

• 錯(cuò)誤處理：Axios 提供了全面的錯(cuò)誤處理機(jī)制。它會(huì)自動(dòng)檢測(cè)和處理 HTTP 錯(cuò)誤狀態(tài)碼，并將其包裝為可讀的錯(cuò)誤對(duì)象。此外，還可以添加自定義的錯(cuò)誤處理邏輯，以便更好地處理錯(cuò)誤情況。

• 取消請(qǐng)求：Axios 允許取消尚未完成的請(qǐng)求。這對(duì)于需要中止或忽略之前發(fā)出的請(qǐng)求非常有用，例如在用戶取消操作或頁(yè)面導(dǎo)航時(shí)。

Axios 成為流行的發(fā)起 HTTP 請(qǐng)求的工具有以下原因：

• 易于使用：Axios 提供了簡(jiǎn)潔而直觀的 API，使得發(fā)送和處理 HTTP 請(qǐng)求變得簡(jiǎn)單和容易上手。

• 廣泛的應(yīng)用：Axios 可以在瀏覽器和Node.js環(huán)境中使用，使得它在前端和后端開(kāi)發(fā)中都具有廣泛的適用性。

• 功能豐富：Axios 提供了許多實(shí)用的功能，如攔截器、請(qǐng)求和響應(yīng)的轉(zhuǎn)換、錯(cuò)誤處理等，使得開(kāi)發(fā)人員能夠更好地控制和處理網(wǎng)絡(luò)請(qǐng)求。

• 活躍的社區(qū)支持：Axios 有一個(gè)活躍的社區(qū)，擁有廣泛的用戶群體，因此可以獲得廣泛的支持和資源。這包括文檔、示例代碼、問(wèn)題解答等。

總而言之，Axios 是一個(gè)功能強(qiáng)大、易于使用且受歡迎的用于發(fā)起 HTTP 請(qǐng)求的工具，它提供了許多便捷的功能和良好的開(kāi)發(fā)體驗(yàn)，使得處理網(wǎng)絡(luò)請(qǐng)求變得更加簡(jiǎn)單和高效。

封裝Axios

• 在項(xiàng)目目錄中創(chuàng)建一個(gè)services文件夾來(lái)封裝網(wǎng)絡(luò)請(qǐng)求的邏輯。

• 在services中創(chuàng)建modules文件夾來(lái)編寫(xiě)復(fù)雜的網(wǎng)絡(luò)請(qǐng)求邏輯，在request中封裝Axios邏輯，創(chuàng)建index文件作為services統(tǒng)一出口。

• 在request中配置index.js文件封裝一個(gè)類(lèi)來(lái)處理網(wǎng)絡(luò)請(qǐng)求，在config.js文件中配置基本選項(xiàng)，例如BASE_URL、TIMEOUT。

• 配置request中的index.js文件

import axios from "axios";
import { BASE_URL, TIMEOUT } from "./config";

class HYRequest {
  // 創(chuàng)建構(gòu)造函數(shù)
  constructor(baseURL, timeout) {
    // 創(chuàng)建instance實(shí)例
    this.instance = axios.create({
      baseURL,
      timeout,
    });
    // 配置攔截器，對(duì)獲取數(shù)據(jù)進(jìn)行響應(yīng)
    this.instance.interceptors.response.use(
      (res) => {
        return res.data;
      },
      (err) => {
        return err;
      }
    );
  }

  // request請(qǐng)求
  request(config) {
    return this.instance.request(config);
  }

  // 配置get請(qǐng)求方法
  get(config) {
    return this.request({ ...config, method: "get" });
  }

  // 配置post請(qǐng)求方法
  post(config) {
    return this.request({ ...config, method: "post" });
  }
}

const hyRequest = new HYRequest(BASE_URL, TIMEOUT);

export default hyRequest;

這里通過(guò)類(lèi)的內(nèi)聚性將網(wǎng)絡(luò)請(qǐng)求的邏輯匯集到一起，用axios.create函數(shù)創(chuàng)建instance實(shí)例，構(gòu)造函數(shù)接收baseUrl和timeout來(lái)配置instance，通過(guò)interceptor攔截器攔截response結(jié)果，在通過(guò)配置request、get、post實(shí)現(xiàn)對(duì)Axios的調(diào)用來(lái)完成網(wǎng)絡(luò)請(qǐng)求，最后用創(chuàng)建好的類(lèi)來(lái)創(chuàng)建一個(gè)實(shí)例，接收的參數(shù)為在config文件中配置好的基本選項(xiàng)，然后導(dǎo)出這個(gè)實(shí)例即可在項(xiàng)目代碼中進(jìn)行使用。

• 配置request中的config文件

export const BASE_URL = "http://codercba.com:1888/airbnb/api";

export const TIMEOUT = 10000;

這里簡(jiǎn)單配置request的基本選項(xiàng)來(lái)方便我們發(fā)送網(wǎng)絡(luò)請(qǐng)求

• 對(duì)封裝好的hyRequest進(jìn)行導(dǎo)出

import hyRequest from "./request";

export default hyRequest;

這里是services文件夾的統(tǒng)一導(dǎo)出出口，方便進(jìn)行代碼維護(hù)

使用這里封裝的類(lèi)進(jìn)行網(wǎng)絡(luò)請(qǐng)求

import React, { memo, useEffect } from "react";
import hyRequest from "@/services";

const Home = memo(() => {
  // 網(wǎng)絡(luò)請(qǐng)求的代碼
  useEffect(() => {
    hyRequest.get({ url: "/home/highscore" }).then((res) => {
      console.log(res);
    });
  }, []);

  return <div>Home</div>;
});

export default Home;

這里在home組件中先進(jìn)行導(dǎo)入hyRequest，即可發(fā)送網(wǎng)絡(luò)請(qǐng)求，配置config參數(shù)，傳入{ url: "/home/highscore" }來(lái)發(fā)送網(wǎng)絡(luò)請(qǐng)求。

這便是通過(guò)封裝好的hyRequest類(lèi)發(fā)送網(wǎng)絡(luò)請(qǐng)求得到的結(jié)果

總結(jié)

封裝 Axios 的好處：

• 降低代碼耦合度：通過(guò)封裝 Axios，可以將網(wǎng)絡(luò)請(qǐng)求的具體實(shí)現(xiàn)細(xì)節(jié)隱藏在封裝的模塊或類(lèi)中，其他模塊只需要與封裝后的接口進(jìn)行交互，從而降低了代碼的耦合度。
• 提高可維護(hù)性：封裝 Axios 可以將網(wǎng)絡(luò)請(qǐng)求的邏輯集中在一個(gè)地方，使得對(duì)網(wǎng)絡(luò)請(qǐng)求的修改和維護(hù)更加方便和一致。如果需要更換或升級(jí)網(wǎng)絡(luò)請(qǐng)求庫(kù)，只需在封裝層進(jìn)行修改，而不需要在整個(gè)項(xiàng)目中的各個(gè)地方進(jìn)行修改。
• 增強(qiáng)可測(cè)試性：通過(guò)封裝 Axios，可以更容易地進(jìn)行單元測(cè)試。由于網(wǎng)絡(luò)請(qǐng)求的邏輯被封裝在一個(gè)獨(dú)立的模塊或類(lèi)中，可以方便地模擬請(qǐng)求和響應(yīng)，編寫(xiě)針對(duì)封裝層的單元測(cè)試。
• 提升代碼的可復(fù)用性：封裝 Axios 可以使得網(wǎng)絡(luò)請(qǐng)求的代碼在不同的項(xiàng)目中更易于復(fù)用。封裝后的模塊或類(lèi)可以被多個(gè)模塊或項(xiàng)目共享，而不需要重復(fù)編寫(xiě)發(fā)送網(wǎng)絡(luò)請(qǐng)求的代碼。

結(jié)束語(yǔ)

通過(guò)封裝Axios來(lái)降低項(xiàng)目代碼對(duì)于Axios的直接依賴，即使后面要更換使用網(wǎng)絡(luò)請(qǐng)求的第三方庫(kù)，也可以更加方便的修改和維護(hù)代碼，在編寫(xiě)項(xiàng)目的時(shí)候我們也應(yīng)該多應(yīng)用這種思路，合理抽取代碼邏輯，使代碼更容易維護(hù)，提高代碼復(fù)用性。

以上就是關(guān)于封裝axios網(wǎng)絡(luò)請(qǐng)求降低代碼耦合度詳解的詳細(xì)內(nèi)容，更多關(guān)于axios網(wǎng)絡(luò)請(qǐng)求降低耦合度的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論