所謂封裝與模組化,對我這種初學者來說,個人理解就是解耦,比如說,當我們前端一個專案使用了現在流行的模組,但是沒有對其進行封裝處理,包括一些相同的程式碼邏輯,把他們分散在各個元件當中,這樣一來整個專案對於這個模組的耦合度太高.如果將來這個模組突然停止維護,或者有更好的模組將其替代,我們想要更換模組時就顯得異常困難.

通過對axios封裝的學習.我想把它記錄在部落格中,也算是學習過後加深理解

雖然程式碼只針對於axios,但是其中的思想卻是最重要的,看得懂程式碼只是第一步,瞭解其背後的意圖才是主要目的.

我的專案是基於vue3和TypeScript的,因此邏輯部分將使用ts實現.當然,這只是為了演示而進行的簡單的封裝

--------------------------下面是具體的操作步驟-------------------------------

---------------------第一步,編寫核心的程式碼邏輯-------------------------------

首先我們在專案中新建一個request.ts的檔案,用來匯入axios,編寫核心的邏輯(請求方法,返回內容的操作等)

import type { AxiosInstance, AxiosRequestConfig } from 'axios'
import axios from 'axios'

class KXRequest {
  instance: AxiosInstance

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

  kxRequest(config: AxiosRequestConfig): void {
    this.instance.request(config).then((res) => {
      console.log(res)
    })
  }
}

export default KXRequest

使用class來使整個程式碼的封裝性更強,

檢視原始碼,發現axios.create(config)中的create方法需要傳入一個型別為AxiosRequestConfig的引數,所以config的型別為AxiosRequestConfig

axios.create(config)執行後創建出來一個例項,這個例項的型別是AxiosInstance,為方便對返回值進行操作,新建一個instance變數,來儲存axios.create(config)返回的結果,

所以instance的型別時AxiosStance型別的,

使用構造器的目的也是為了新建物件時對其中的instance進行初始化,並且要求使用這個類新建物件時傳入的是AxiosRequestConfig型別的引數

然後使用instance進行下面的request操作

下面來分析request這個方法

 kxRequest(config: AxiosRequestConfig): void {
    this.instance.request(config).then((res) => {
      console.log(res)
    })
  }

這裡的request是我們自定義了一個名為request的方法,(嗯,區分一下instance的request),這裡就先考慮他沒有返回值

instance因為是AxiosStance型別,該型別有request方法,該方法會返回一個promise物件(這都是原始碼中的內容,使用WebStorm可以按住CTRL鍵檢視)

下面貼一段原始碼

request<T = any, R = AxiosResponse<T>> (config: AxiosRequestConfig): Promise<R>;

而instan的request方法又需要傳入一個AxiosRequestConfig的config作為引數,所以我們在編寫kxRequest方法時需要將config也傳進來,然後進行相對應的操作即可,

第一步講解完成,當然,再次申明,這只是簡單的實現,重要的是思想

---------------------第二步,為封裝的方法設立一個統一的出口-------------------------------

import KXRequest from './request'
import { BASE_URL, TIME_OUT } from './request/config'

const kxRequest = new KXRequest({
  baseURL: BASE_URL,
  timeout: TIME_OUT,
  headers: [],
})

export default kxRequest

這裡new的KXRequest中的引數就是其實就是config,這段程式碼相當於是對第一段程式碼的代理,進行初始化操作

---------------------最後一步,在專案中使用-------------------------------

先來程式碼,

import { createApp } from 'vue'
import App from './App.vue'
import kxRequest from './service/index'

const app = createApp(App)
app.mount('#app')

kxRequest.kxRequest({
  url: '/home/multidata',
  method: 'GET',
})

我刪除了不相關的程式碼.

首先匯入將第二步匯出的kxRequest在main.ts中匯入

接著呼叫kxRequest的request方法即可.此時呼叫的kxRequest方法實際是第一步中的kxRequest,因為匯入的第二步的程式碼實際是建立了第一步的例項

這樣便完成了一個簡單的封裝,當然我會在未來的時間繼續在下方更新更多操作