快捷導(dǎo)航

如何使用TS對axios的進(jìn)行簡單封裝

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

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

1.安裝axios

npm i axios

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

3.導(dǎo)入axios并創(chuàng)建axios實(shí)例

//引入axios
import axios from 'axios'

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

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

① 查看axios的類型聲明文件

② 請求配置對象的類型

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

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

③ 響應(yīng)對象的類型

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

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

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

④ axios.request函數(shù)

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

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

⑤ 開始封裝

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

// AxiosRequestConfig從axios中導(dǎo)出的，將config聲明為AxiosRequestConfig，這樣我們調(diào)用函數(shù)時(shí)就可以獲得TS帶來的類型提示
// 泛型T用來指定Reponse類型中result的類型
export default <T> (config: AxiosRequestConfig) => {
  // 指定promise實(shí)例成功之后的回調(diào)函數(shù)的第一個(gè)參數(shù)的類型為Response<T>
  return new Promise<Response<T>>((resolve, reject) => {
    // instance是我們在上面創(chuàng)建的axios的實(shí)例
    // 我們指定instance.request函數(shù)的第一個(gè)泛型為Response，并把Response的泛型指定為函數(shù)的泛型T
    // 第二個(gè)泛型AxiosResponse的data類型就被自動指定為Response<T>
    // AxiosResponse從axios中導(dǎo)出的，也可以不指定，TS會自動類型推斷
    instance.request<Response<T>>(config).then((response: AxiosResponse<Response<T>>) => {
      // response類型就是AxiosResponse<Response<T>>，而data類型就是我們指定的Response<T>
      // 請求成功后就我們的數(shù)據(jù)從response取出并使返回的promise實(shí)例的狀態(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ù)的第一個(gè)泛型的類型為Category[]，也就是指定 Response<T> 中T的類型
  return request<Category[]>({
    url: '/home/category/head',
    method: 'get'
  })
}

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

下圖resonse的類型是Response