快捷導航

關(guān)于封裝axios網(wǎng)絡(luò)請求降低代碼耦合度詳解

更新時間：2024年05月13日 09:59:48 作者：不會寫前端的小魚

在項目中直接使用Axios或其他第三方庫來發(fā)送網(wǎng)絡(luò)請求獲取數(shù)據(jù)時,會導致代碼與網(wǎng)絡(luò)請求的邏輯耦合度過高,導致難以維護,所以本文將講解如何將網(wǎng)路請求的代碼進行封裝來進行解耦操作,文中通過代碼示例和圖文講解的非常詳細,需要的朋友可以參考下

引言

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

理解耦合度

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

Axios概述

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

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

支持多種請求方式：Axios 支持常見的 HTTP 請求方法，如 GET、POST、PUT、DELETE 等，可以滿足不同類型的請求需求。
攔截器支持：Axios 提供了攔截器（Interceptors）功能，可以在請求發(fā)送或響應(yīng)返回之前對它們進行攔截和處理。這使得可以在請求和響應(yīng)的不同階段添加全局的處理邏輯，例如認證、錯誤處理、請求/響應(yīng)轉(zhuǎn)換等。
Promise API：Axios 基于 Promise 提供了一致的 API，可以使用鏈式調(diào)用來處理請求和響應(yīng)。這使得可以更容易地處理異步操作，并使用 Promise 的特性，如 .then()、.catch()、.finally() 等。
請求和響應(yīng)的轉(zhuǎn)換：Axios 允許自定義請求和響應(yīng)的數(shù)據(jù)轉(zhuǎn)換邏輯?？梢酝ㄟ^攔截器將請求數(shù)據(jù)格式化為特定格式（如 JSON），或者將響應(yīng)數(shù)據(jù)進行解析和轉(zhuǎn)換，以適應(yīng)項目的需求。
錯誤處理：Axios 提供了全面的錯誤處理機制。它會自動檢測和處理 HTTP 錯誤狀態(tài)碼，并將其包裝為可讀的錯誤對象。此外，還可以添加自定義的錯誤處理邏輯，以便更好地處理錯誤情況。
取消請求：Axios 允許取消尚未完成的請求。這對于需要中止或忽略之前發(fā)出的請求非常有用，例如在用戶取消操作或頁面導航時。

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

易于使用：Axios 提供了簡潔而直觀的 API，使得發(fā)送和處理 HTTP 請求變得簡單和容易上手。
廣泛的應(yīng)用：Axios 可以在瀏覽器和Node.js環(huán)境中使用，使得它在前端和后端開發(fā)中都具有廣泛的適用性。
功能豐富：Axios 提供了許多實用的功能，如攔截器、請求和響應(yīng)的轉(zhuǎn)換、錯誤處理等，使得開發(fā)人員能夠更好地控制和處理網(wǎng)絡(luò)請求。
活躍的社區(qū)支持：Axios 有一個活躍的社區(qū)，擁有廣泛的用戶群體，因此可以獲得廣泛的支持和資源。這包括文檔、示例代碼、問題解答等。

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

封裝Axios

在項目目錄中創(chuàng)建一個services文件夾來封裝網(wǎng)絡(luò)請求的邏輯。

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

在request中配置index.js文件封裝一個類來處理網(wǎng)絡(luò)請求，在config.js文件中配置基本選項，例如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實例
    this.instance = axios.create({
      baseURL,
      timeout,
    });
    // 配置攔截器，對獲取數(shù)據(jù)進行響應(yīng)
    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;

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

配置request中的config文件

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

export const TIMEOUT = 10000;

這里簡單配置request的基本選項來方便我們發(fā)送網(wǎng)絡(luò)請求

對封裝好的hyRequest進行導出

import hyRequest from "./request";

export default hyRequest;

這里是services文件夾的統(tǒng)一導出出口，方便進行代碼維護

使用這里封裝的類進行網(wǎng)絡(luò)請求

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

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

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

export default Home;

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

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

總結(jié)

封裝 Axios 的好處：

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