記錄--TS封裝axios

来源:https://www.cnblogs.com/smileZAZ/archive/2022/06/28/16419297.html
-Advertisement-
Play Games

這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 寫在前面 雖然說Fetch API已經使用率已經非常的高了，但是在一些老的瀏覽器還是不支持的，而且axios仍然每周都保持2000多萬的下載量，這就說明瞭axios仍然存在不可撼動的地位，接下來我們就一步一步的去封裝，實現一個靈活、可復用 ...


這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助

寫在前面

雖然說Fetch API已經使用率已經非常的高了，但是在一些老的瀏覽器還是不支持的，而且axios仍然每周都保持2000多萬的下載量，這就說明瞭axios仍然存在不可撼動的地位，接下來我們就一步一步的去封裝，實現一個靈活、可復用的一個請求請發。

這篇文章封裝的axios已經滿足如下功能：

  • 無處不在的代碼提示；
  • 靈活的攔截器；
  • 可以創建多個實例，靈活根據項目進行調整；
  • 每個實例，或者說每個介面都可以靈活配置請求頭、超時時間等；
  • 取消請求（可以根據url取消單個請求也可以取消全部請求）。

基礎封裝

首先我們實現一個最基本的版本，實例代碼如下：

// index.ts
import axios from 'axios'
import type { AxiosInstance, AxiosRequestConfig } from 'axios'

class Request {
  // axios 實例
  instance: AxiosInstance

  constructor(config: AxiosRequestConfig) {
    this.instance = axios.create(config)
  }
  request(config: AxiosRequestConfig) {
    return this.instance.request(config)
  }
}

export default Request

這裡將其封裝為一個類，而不是一個函數的原因是因為類可以創建多個實例，適用範圍更廣，封裝性更強一些。

攔截器封裝

首先我們封裝一下攔截器，這個攔截器分為三種：

  • 類攔截器
  • 實例攔截器
  • 介面攔截器

接下來我們就分別實現這三個攔截器。

類攔截器

類攔截器比較容易實現，只需要在類中對axios.create()創建的實例調用interceptors下的兩個攔截器即可，實例代碼如下：

// index.ts
constructor(config: AxiosRequestConfig) {
  this.instance = axios.create(config)
  
  this.instance.interceptors.request.use(
    (res: AxiosRequestConfig) => {
      console.log('全局請求攔截器')
      return res
    },
    (err: any) => err,
  )
  this.instance.interceptors.response.use(
    // 因為我們介面的數據都在res.data下，所以我們直接返回res.data
    (res: AxiosResponse) => {
      console.log('全局響應攔截器')
      return res.data
    },
    (err: any) => err,
  )
}

我們在這裡對響應攔截器做了一個簡單的處理，就是將請求結果中的.data進行返回，因為我們對介面請求的數據主要是存在在.data中，跟data同級的屬性我們基本是不需要的。

實例攔截器

實例攔截器是為了保證封裝的靈活性，因為每一個實例中的攔截後處理的操作可能是不一樣的，所以在定義實例時，允許我們傳入攔截器。

首先我們定義一下interface，方便類型提示，代碼如下：

// types.ts
import type { AxiosRequestConfig, AxiosResponse } from 'axios'
export interface RequestInterceptors {
  // 請求攔截
  requestInterceptors?: (config: AxiosRequestConfig) => AxiosRequestConfig
  requestInterceptorsCatch?: (err: any) => any
  // 響應攔截
  responseInterceptors?: (config: AxiosResponse) => AxiosResponse
  responseInterceptorsCatch?: (err: any) => any
}
// 自定義傳入的參數
export interface RequestConfig extends AxiosRequestConfig {
  interceptors?: RequestInterceptors
}

定義好基礎的攔截器後，我們需要改造我們傳入的參數的類型，因為axios提供的AxiosRequestConfig是不允許我們傳入攔截器的，所以說我們自定義了RequestConfig，讓其繼承與AxiosRequestConfig 。

剩餘部分的代碼也比較簡單，如下所示：

// index.ts
import axios, { AxiosResponse } from 'axios'
import type { AxiosInstance, AxiosRequestConfig } from 'axios'
import type { RequestConfig, RequestInterceptors } from './types'

class Request {
  // axios 實例
  instance: AxiosInstance
  // 攔截器對象
  interceptorsObj?: RequestInterceptors

  constructor(config: RequestConfig) {
    this.instance = axios.create(config)
    this.interceptorsObj = config.interceptors
    
    this.instance.interceptors.request.use(
      (res: AxiosRequestConfig) => {
        console.log('全局請求攔截器')
        return res
      },
      (err: any) => err,
    )

    // 使用實例攔截器
    this.instance.interceptors.request.use(
      this.interceptorsObj?.requestInterceptors,
      this.interceptorsObj?.requestInterceptorsCatch,
    )
    this.instance.interceptors.response.use(
      this.interceptorsObj?.responseInterceptors,
      this.interceptorsObj?.responseInterceptorsCatch,
    )
    // 全局響應攔截器保證最後執行
    this.instance.interceptors.response.use(
      // 因為我們介面的數據都在res.data下，所以我們直接返回res.data
      (res: AxiosResponse) => {
        console.log('全局響應攔截器')
        return res.data
      },
      (err: any) => err,
    )
  }
}

我們的攔截器的執行順序為實例請求→類請求→實例響應→類響應；這樣我們就可以在實例攔截上做出一些不同的攔截，

介面攔截

現在我們對單一介面進行攔截操作，首先我們將AxiosRequestConfig類型修改為RequestConfig允許傳遞攔截器；然後我們在類攔截器中將介面請求的數據進行了返回，也就是說在request()方法中得到的類型就不是AxiosResponse類型了。

我們查看axios的index.d.ts中，對request()方法的類型定義如下：

// type.ts
request<T = any, R = AxiosResponse<T>, D = any>(config: AxiosRequestConfig<D>): Promise<R>;

也就是說它允許我們傳遞類型，從而改變request()方法的返回值類型，我們的代碼如下：

// index.ts
request<T>(config: RequestConfig): Promise<T> {
  return new Promise((resolve, reject) => {
    // 如果我們為單個請求設置攔截器，這裡使用單個請求的攔截器
    if (config.interceptors?.requestInterceptors) {
      config = config.interceptors.requestInterceptors(config)
    }
    this.instance
      .request<any, T>(config)
      .then(res => {
        // 如果我們為單個響應設置攔截器，這裡使用單個響應的攔截器
        if (config.interceptors?.responseInterceptors) {
          res = config.interceptors.responseInterceptors<T>(res)
        }

        resolve(res)
      })
      .catch((err: any) => {
        reject(err)
      })
  })
}

這裡還存在一個細節，就是我們在攔截器接受的類型一直是AxiosResponse類型，而在類攔截器中已經將返回的類型改變，所以說我們需要為攔截器傳遞一個泛型，從而使用這種變化，修改types.ts中的代碼，示例如下：

// index.ts
export interface RequestInterceptors {
  // 請求攔截
  requestInterceptors?: (config: AxiosRequestConfig) => AxiosRequestConfig
  requestInterceptorsCatch?: (err: any) => any
  // 響應攔截
  responseInterceptors?: <T = AxiosResponse>(config: T) => T
  responseInterceptorsCatch?: (err: any) => any
}

請求介面攔截是最前執行，而響應攔截是最後執行。

封裝請求方法

現在我們就來封裝一個請求方法，首先是類進行實例化示例代碼如下：

// index.ts
import Request from './request'

const request = new Request({
  baseURL: import.meta.env.BASE_URL,
  timeout: 1000 * 60 * 5,
  interceptors: {
    // 請求攔截器
    requestInterceptors: config => {
      console.log('實例請求攔截器')

      return config
    },
    // 響應攔截器
    responseInterceptors: result => {
      console.log('實例響應攔截器')
      return result
    },
  },
})

然後我們封裝一個請求方法， 來發送網路請求，代碼如下：

// src/server/index.ts
import Request from './request'

import type { RequestConfig } from './request/types'
interface YWZRequestConfig<T> extends RequestConfig {
  data?: T
}
interface YWZResponse<T> {
  code: number
  message: string
  data: T
}

/**
 * @description: 函數的描述
 * @interface D 請求參數的interface
 * @interface T 響應結構的intercept
 * @param {YWZRequestConfig} config 不管是GET還是POST請求都使用data
 * @returns {Promise}
 */
const ywzRequest = <D, T = any>(config: YWZRequestConfig<D>) => {
  const { method = 'GET' } = config
  if (method === 'get' || method === 'GET') {
    config.params = config.data
  }
  return request.request<YWZResponse<T>>(config)
}

export default ywzRequest

該請求方式預設為GET，且一直用data作為參數；

取消請求

應評論區@Pic、@Michaelee和@Alone_Error的建議，這裡增加了一個取消請求；關於什麼是取消請求可以參考官方文檔。

準備工作

我們需要將所有請求的取消方法保存到一個集合（這裡我用的數組，也可以使用Map）中，然後根據具體需要去調用這個集合中的某個取消請求方法。

首先定義兩個集合，示例代碼如下：

// index.ts
import type {
  RequestConfig,
  RequestInterceptors,
  CancelRequestSource,
} from './types'

class Request {
  /*
  存放取消方法的集合
  * 在創建請求後將取消請求方法 push 到該集合中
  * 封裝一個方法，可以取消請求，傳入 url: string|string[] 
  * 在請求之前判斷同一URL是否存在，如果存在就取消請求
  */
  cancelRequestSourceList?: CancelRequestSource[]
  /*
  存放所有請求URL的集合
  * 請求之前需要將url push到該集合中
  * 請求完畢後將url從集合中刪除
  * 添加在發送請求之前完成，刪除在響應之後刪除
  */
  requestUrlList?: string[]

  constructor(config: RequestConfig) {
    // 數據初始化
    this.requestUrlList = []
    this.cancelRequestSourceList = []
  }
}

這裡用的CancelRequestSource介面，我們去定義一下：

// type.ts
export interface CancelRequestSource {
  [index: string]: () => void
}

這裡的key是不固定的，因為我們使用url做key，只有在使用的時候才知道url，所以這裡使用這種語法。

取消請求方法的添加與刪除

首先我們改造一下request()方法，它需要完成兩個工作，一個就是在請求之前將url和取消請求方法push到我們前面定義的兩個屬性中，然後在請求完畢後（不管是失敗還是成功）都將其進行刪除，實現代碼如下：

// index.ts
request<T>(config: RequestConfig): Promise<T> {
  return new Promise((resolve, reject) => {
    // 如果我們為單個請求設置攔截器，這裡使用單個請求的攔截器
    if (config.interceptors?.requestInterceptors) {
      config = config.interceptors.requestInterceptors(config)
    }
    const url = config.url
    // url存在保存取消請求方法和當前請求url
    if (url) {
      this.requestUrlList?.push(url)
      config.cancelToken = new axios.CancelToken(c => {
        this.cancelRequestSourceList?.push({
          [url]: c,
        })
      })
    }
    this.instance
      .request<any, T>(config)
      .then(res => {
        // 如果我們為單個響應設置攔截器，這裡使用單個響應的攔截器
        if (config.interceptors?.responseInterceptors) {
          res = config.interceptors.responseInterceptors<T>(res)
        }

        resolve(res)
      })
      .catch((err: any) => {
        reject(err)
      })
      .finally(() => {
        url && this.delUrl(url)
      })
  })
}

這裡我們將刪除操作進行了抽離，將其封裝為一個私有方法，示例代碼如下：

// index.ts
/**
 * @description: 獲取指定 url 在 cancelRequestSourceList 中的索引
 * @param {string} url
 * @returns {number} 索引位置
 */
private getSourceIndex(url: string): number {
  return this.cancelRequestSourceList?.findIndex(
    (item: CancelRequestSource) => {
      return Object.keys(item)[0] === url
    },
  ) as number
}
/**
 * @description: 刪除 requestUrlList 和 cancelRequestSourceList
 * @param {string} url
 * @returns {*}
 */
private delUrl(url: string) {
  const urlIndex = this.requestUrlList?.findIndex(u => u === url)
  const sourceIndex = this.getSourceIndex(url)
  // 刪除url和cancel方法
  urlIndex !== -1 && this.requestUrlList?.splice(urlIndex as number, 1)
  sourceIndex !== -1 &&
    this.cancelRequestSourceList?.splice(sourceIndex as number, 1)
}

取消請求方法

現在我們就可以封裝取消請求和取消全部請求了，我們先來封裝一下取消全部請求吧，這個比較簡單，只需要調用this.cancelRequestSourceList中的所有方法即可，實現代碼如下：

// index.ts
// 取消全部請求
cancelAllRequest() {
  this.cancelRequestSourceList?.forEach(source => {
    const key = Object.keys(source)[0]
    source[key]()
  })
}

現在我們封裝一下取消請求，因為它可以取消一個和多個，那它的參數就是url，或者包含多個URL的數組，然後根據傳值的不同去執行不同的操作，實現代碼如下：

// index.ts
// 取消請求
cancelRequest(url: string | string[]) {
  if (typeof url === 'string') {
    // 取消單個請求
    const sourceIndex = this.getSourceIndex(url)
    sourceIndex >= 0 && this.cancelRequestSourceList?.[sourceIndex][url]()
  } else {
    // 存在多個需要取消請求的地址
    url.forEach(u => {
      const sourceIndex = this.getSourceIndex(u)
      sourceIndex >= 0 && this.cancelRequestSourceList?.[sourceIndex][u]()
    })
  }
}

測試

測試請求方法

現在我們就來測試一下這個請求方法，這裡我們使用www.apishop.net/提供的免費API進行測試，測試代碼如下：

<script setup lang="ts">
// app.vue
import request from './service'
import { onMounted } from 'vue'

interface Req {
  apiKey: string
  area?: string
  areaID?: string
}
interface Res {
  area: string
  areaCode: string
  areaid: string
  dayList: any[]
}
const get15DaysWeatherByArea = (data: Req) => {
  return request<Req, Res>({
    url: '/api/common/weather/get15DaysWeatherByArea',
    method: 'GET',
    data,
    interceptors: {
      requestInterceptors(res) {
        console.log('介面請求攔截')

        return res
      },
      responseInterceptors(result) {
        console.log('介面響應攔截')
        return result
      },
    },
  })
}
onMounted(async () => {
  const res = await get15DaysWeatherByArea({
    apiKey: import.meta.env.VITE_APP_KEY,
    area: '北京市',
  })
  console.log(res.result.dayList)
})
</script>

如果在實際開發中可以將這些代碼分別抽離。

上面的代碼在命令中輸出

介面請求攔截
實例請求攔截器
全局請求攔截器
實例響應攔截器
全局響應攔截器
介面響應攔截
[{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]

測試取消請求

首先我們在.server/index.ts中對取消請求方法進行導出，實現代碼如下：

// 取消請求
export const cancelRequest = (url: string | string[]) => {
  return request.cancelRequest(url)
}
// 取消全部請求
export const cancelAllRequest = () => {
  return request.cancelAllRequest()
}

然後我們在app.vue中對其進行引用，實現代碼如下：

<template>
  <el-button
    @click="cancelRequest('/api/common/weather/get15DaysWeatherByArea')"
    >取消請求</el-button
  >
  <el-button @click="cancelAllRequest">取消全部請求</el-button>
  <router-view></router-view>
</template>
<script setup lang="ts">
import request, { cancelRequest, cancelAllRequest } from './service'
</script>

發送請求後，點擊按鈕即可實現對應的功能

本文轉載於:

https://juejin.cn/post/7071518211392405541

如果對您有所幫助，歡迎您點個關註，我會定時更新技術文檔，大家一起討論學習，一起進步。

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • MySQL max() min() 函數取值錯誤
    今天日誌出現異常，一步一步debug發現SQL語句返回值出錯，進一步發現是max()函數返回出錯。點擊跳轉解決辦法，趕時間的朋友可以去獲得答案。當然我還是希望大伙看看原由。 select max(HTMBXH) from biz_mn_contract_temp; 返回值按理應該是10 ，結果返回了 ...
  • 阿裡雲體驗有獎：如何將 PolarDB-X 與大數據等系統互通
    體驗簡介 場景將提供一臺配置了CentOS 8.5操作系統的ECS實例（雲伺服器）。通過本教程的操作帶您體驗如何將PolarDB-X通過Canal與ClickHouse進行互通，搭建一個實時分析系統。點擊前往 實驗準備 1. 創建實驗資源 開始實驗之前，您需要先創建ECS實例資源。 在實驗室頁面，單 ...
  • 運動App如何實現端側後臺保活，讓運動記錄更完整？
    你在鍛煉健身時，有沒有遇到這樣的情況？辛辛苦苦鍛煉了幾小時，卻發現App停止了運行，本次運動並沒有被記錄到App上，從而失去了一個查看完整運動數據的機會？ 運動類App是通過手機或者穿戴設備的感測器，來識別運動狀態並反饋給用戶的，App能否在手機後臺時刻保持運行是影響運動數據完整性的關鍵因素。為了滿 ...
  • 【前端面試】（四）JavaScript var let const的區別
    視頻鏈接： JavaScript var let const的區別 - Web前端工程師面試題講解 參考鏈接： JavaScript 變數 JavaScript Let JavaScript Const 練習網站： codepen.io 初步認識： 功能實現 HTML的部分： <input type ...
  • CSS畫三角形，圓形，橢圓，圓角長方形
    1、CSS畫一個三角形：（div寬高為0，border存在且顏色不一） step1: 設置寬度，高度為 0 的一個div盒子； step2: 為了方便理解，將盒子的 4 個邊框分別設置一樣的寬度boder，不同的顏色； step3: transparent將其他三個 邊框隱藏掉，就能看到效果了。 如 ...
  • Vue 項目實踐指南
    Vue 框架通過數據雙向綁定和虛擬 DOM 技術，幫我們處理了前端開發中最臟最累的 DOM 操作部分， 我們不再需要去考慮如何操作 DOM 以及如何最高效地操作 DOM；但 Vue 項目中仍然存在項目首屏優化、Webpack 編譯配置優化等問題，所以我們仍然需要去關註 Vue 項目性能方面的優化，使 ...
  • 一種JavaScript響應式系統設計與實現
    一種JavaScript響應式系統實現 根據VueJs核心團隊成員霍春陽《Vue.js設計與實現》第四章前三節整理而成 1. 響應式數據與副作用函數 1.1 副作用函數 會產生副作用的函數。 如下示例所示： function effect () { document.body.innerText = ...
  • 抽獎動畫 - 鯉魚跳龍門
    pageClass: home-page-class 鯉魚跳龍門動畫 1. 需求 年中618營銷活動要求做一個鯉魚跳龍門的動畫，產品參考了支付寶上的一個動畫，要求模仿這個來做一個類似的動畫。產品提供的截屏視頻如下： 圖1 從這個視頻里得到的信息，我們可以把動畫分解一下： 321倒計時結束，動畫開始播 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類