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

更新時間：2022年10月29日 16:04:25 作者：enwinter

在vue項目中和后臺交互獲取數(shù)據(jù)這塊,我們通常使用的是axios庫,這篇文章主要給大家介紹了關(guān)于如何使用TS對axios的進行簡單封裝的相關(guān)資料,需要的朋友可以參考下

1.安裝axios

npm i axios

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

3.導入axios并創(chuàng)建axios實例

//引入axios
import axios from 'axios'

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

4.封裝請求函數(shù)

① 查看axios的類型聲明文件

② 請求配置對象的類型

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

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

③ 響應對象的類型

axios發(fā)送數(shù)據(jù)請求后會返回的promise實例，AxiosResponse就是這個promise實例成功后回調(diào)函數(shù)的第一個參數(shù)的類型，例如下面的代碼，代碼中的response的類型就是AxiosResponse。

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

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

④ axios.request函數(shù)

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

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

⑤ 開始封裝

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

// AxiosRequestConfig從axios中導出的，將config聲明為AxiosRequestConfig，這樣我們調(diào)用函數(shù)時就可以獲得TS帶來的類型提示
// 泛型T用來指定Reponse類型中result的類型
export default <T> (config: AxiosRequestConfig) => {
  // 指定promise實例成功之后的回調(diào)函數(shù)的第一個參數(shù)的類型為Response<T>
  return new Promise<Response<T>>((resolve, reject) => {
    // instance是我們在上面創(chuàng)建的axios的實例
    // 我們指定instance.request函數(shù)的第一個泛型為Response，并把Response的泛型指定為函數(shù)的泛型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>
      // 請求成功后就我們的數(shù)據(jù)從response取出并使返回的promise實例的狀態(tài)變?yōu)槌晒Φ?
      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 首頁商品分類數(shù)組
 */
export const reqGetCategory = () => {
  // 指定我們封裝的request函數(shù)的第一個泛型的類型為Category[]，也就是指定 Response<T> 中T的類型
  return request<Category[]>({
    url: '/home/category/head',
    method: 'get'
  })
}

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

下圖resonse的類型是Response