如何使用TS對axios的進行簡單封裝

Posted on by

1.安裝axios

npm i axios

2.在合適路徑下新建request.ts（名稱可隨意），例如可以在項目的src下創建utils文件夾創建request.ts

3.導入axios並創建axios實例

//引入axios
import axios from 'axios'

//使用指定配置創建axios實例
const instance = axios.create({
  // 基礎路徑
  baseURL: 'http://pcapi-xiaotuxian-front-devtest.itheima.net/',
  // 請求超時時間
  timeout: 5000,
  // ....其他配置
})

4.封裝請求函數

① 查看axios的類型聲明文件

② 請求配置對象的類型

從圖中可知AxiosRequestConfig是axios請求配置對象的接口，例如下面的代碼，axios函數的第一個參數就是AxiosRequestConfig接口的實例。而泛型D則是請求配置對象（axios函數的第一個參數）中data的類型，默認類型為any，因為AxiosRequestConfig接口內容太多就不列出來瞭。

axios({
  url: 'http://',
  method: 'post',
  data: {}
  // ....
})

③ 響應對象的類型

axios發送數據請求後會返回的promise實例，AxiosResponse就是這個promise實例成功後回調函數的第一個參數的類型，例如下面的代碼，代碼中的response的類型就是AxiosResponse。

axios({
  url: 'http://',
  method: 'post',
  data: {}
}).then((response) => {
  console.log(response.data)
})

從下圖可知，AxiosResponse接口第一個泛型參數T，泛型T就是AxiosResponse接口中data的數據類型，默認類型為any，也就是上圖response.data的類型。第二個泛型參數和請求配置對象一樣，是AxiosRequestConfig接口中data的類型，默認類型為any。

④ axios.request函數

從axios的聲明文件中可以看出直接使用axios()發送網絡請求是不能指定泛型參數的，而axios.request()對泛型的支持非常友好，請看下圖

request函數的第一個泛型T指定瞭第二個泛型AxiosResponse接口中data的類型。第二個泛型R默認為AxiosResponse，指定瞭request函數返回的promise實例成功的回調函數的第一個參數的類型。第三個泛型D指定瞭請求配置對象中data的數據類型。（看不懂的話，請再結合第②③點再看一次）

⑤ 開始封裝

// 後臺給我們的數據類型如下
// 泛型T指定瞭Response類型中result的類型，默認為any
type Response<T = any> = {
  // 描述
  msg: string
  // 返回的數據
  result: T
}

// AxiosRequestConfig從axios中導出的，將config聲明為AxiosRequestConfig，這樣我們調用函數時就可以獲得TS帶來的類型提示
// 泛型T用來指定Reponse類型中result的類型
export default <T> (config: AxiosRequestConfig) => {
  // 指定promise實例成功之後的回調函數的第一個參數的類型為Response<T>
  return new Promise<Response<T>>((resolve, reject) => {
    // instance是我們在上面創建的axios的實例
    // 我們指定instance.request函數的第一個泛型為Response，並把Response的泛型指定為函數的泛型T
    // 第二個泛型AxiosResponse的data類型就被自動指定為Response<T>
    // AxiosResponse從axios中導出的，也可以不指定，TS會自動類型推斷
    instance.request<Response<T>>(config).then((response: AxiosResponse<Response<T>>) => {
      // response類型就是AxiosResponse<Response<T>>，而data類型就是我們指定的Response<T>
      // 請求成功後就我們的數據從response取出並使返回的promise實例的狀態變為成功的
      resolve(response.data)
    }).catch((error :any) => {
      // 請求失敗的處理
      reject(error)
    })
  })
}

⑥ 使用

import request from "@/utils/request";

// 商品分類
export interface Category {
  id: string;
  name: string;
  picture: string;
  children: Category[];
  goods: CategoryGoods[];
}
// 商品分類下的商品
export interface CategoryGoods {
  id: string;
  name: string;
  desc: string;
  price: string;
  picture: string;
}

/**
 * 獲取首頁商品分類
 * @returns 首頁商品分類數組
 */
export const reqGetCategory = () => {
  // 指定我們封裝的request函數的第一個泛型的類型為Category[]，也就是指定 Response<T> 中T的類型
  return request<Category[]>({
    url: '/home/category/head',
    method: 'get'
  })
}

這樣我就可以得到類型提示瞭

下圖resonse的類型是Response

下圖response.result的類型是Category[]

下圖是response.result數組中元素的類型是Category

從下圖我們可以看出response的類型

還可以在攔截器裡添加更多功能，這裡就不再贅述瞭。如有錯誤，請多包涵。

總結

到此這篇關於如何使用TS對axios的進行簡單封裝的文章就介紹到這瞭,更多相關TS對axios簡單封裝內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：