? ? ? 本案例旨在教授如何使用Axios庫結(jié)合TypeScript泛型進行HTTP請求的高級封裝，以提升代碼的可復用性和類型安全性。我們將通過一個具體的示例，學習如何創(chuàng)建一個通用的請求函數(shù)，它能夠適應不同類型的API響應，并在請求前后加入自定義邏輯（如錯誤處理、Token注入等）。

1. 引入必要的庫和類型

• 引入Axios：首先，我們導入Axios庫及其相關類型，用于發(fā)起網(wǎng)絡請求。
• 定義類型：引入AxiosInstance和AxiosRequestConfig類型，以增強代碼的類型提示和安全性。

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

2. 創(chuàng)建Axios實例并配置

• 配置基礎設置：通過axios.create方法創(chuàng)建一個Axios實例，并設置基礎URL和超時時間等默認配置

const axiosInstance: AxiosInstance = axios.create({baseURL: 'https://tenapi.cn/v2/',timeout: 10000
});

3. 添加請求和響應攔截器

• 請求攔截器：在請求發(fā)送前可以統(tǒng)一處理邏輯，如添加認證信息。
• 響應攔截器：對返回的響應進行統(tǒng)一處理，如錯誤碼判斷。

axiosInstance.interceptors.request.use(config => {// 可以在此處添加Token或其他請求頭return config;
}, error => Promise.reject(error));axiosInstance.interceptors.response.use(res => res, error => Promise.reject(error));

?4. 定義API響應接口

• ApiResponse接口：定義一個泛型接口來規(guī)范API響應的結(jié)構(gòu)，包含狀態(tài)碼、消息、時間戳和數(shù)據(jù)部分。

export interface ApiResponse<T = any> {code: number;msg: string;timestamp: number;data: T;
}

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

• 泛型request函數(shù)：創(chuàng)建一個異步的泛型函數(shù)request，它接受請求配置并返回經(jīng)過類型轉(zhuǎn)換的響應數(shù)據(jù)。?

export async function request<T>(config: AxiosRequestConfig): Promise<T> {return axiosInstance.request<ApiResponse<T>>(config).then(res => res.data);
}

6. 使用封裝的請求函數(shù)

• 具體請求示例：定義一個數(shù)據(jù)模型Hot，并使用request函數(shù)發(fā)起請求，處理響應數(shù)據(jù)

interface Hot {name: string;url: string;hot: number;
}request<Array<Hot>>({url: '/baiduhot',method: 'get'
}).then(res => {if(res.code === 200) {const hot = res.data[0];console.log(hot.name);}
});

6. 完整代碼

import axios, {type AxiosResponse} from 'axios';
import type { AxiosInstance, AxiosRequestConfig } from 'axios';/* 創(chuàng)建axios實例 */
const axiosInstance : AxiosInstance = axios.create({baseURL: 'https://tenapi.cn/v2/',timeout: 10000
});/* 封裝實例的請求攔截器 */
axiosInstance.interceptors.request.use( config  => {return config;
}, (error) => {return Promise.reject(error);
});/* 封裝實例的響應攔截器 */
axiosInstance.interceptors.response.use( (res : AxiosResponse<any>)  => {return res;
}, (error) => {return Promise.reject(error);
});/* 定義接口 */
export interface ApiResponse<T> {code: number;msg: string;timestamp: number;data: T;
}/* 封裝實例的請求方法 */
export async function request<T>(config: AxiosRequestConfig ) {// axios實例的 request 接受的第一個泛型參數(shù)，就是返回數(shù)據(jù)data的類型return axiosInstance.request<ApiResponse<T>>(config).then((res) => res.data);
}/* 如何使用代碼如下  */
interface Hot {name: string;url: string;hot: number;
}request<Array<Hot>>({url: '/baiduhot',method: 'get'
}).then(res => {if(res.code == 200) {let hot = res.data[0];console.log(hot.name);}
});

提示：更多的Axios配置信息請看官網(wǎng)