下面是一個(gè)簡單的 TypeScript 版本的封裝 Axios 請求的例子，基于 Axios 0.21.1 版本：
import axios, { AxiosRequestConfig, AxiosResponse } from 'axios';
// 定義通用響應(yīng)結(jié)構(gòu)
export interface ApiResponse<T> {
code: number;
data: T;
message: string;
}
// 創(chuàng)建一個(gè) Axios 實(shí)例
const axiosInstance = axios.create({
baseURL: 'https://api.example.com',
});
// 定義請求攔截器
axiosInstance.interceptors.request.use((config: AxiosRequestConfig) => {
// 在發(fā)送請求之前做些什么，比如添加 token 頭部等
return config;
}, (error: any) => {
// 對請求錯(cuò)誤做些什么
return Promise.reject(error);
});
// 定義響應(yīng)攔截器
axiosInstance.interceptors.response.use((response: AxiosResponse) => {
// 對響應(yīng)數(shù)據(jù)做些什么，比如處理通用響應(yīng)結(jié)構(gòu)，返回 data 部分
const apiResponse: ApiResponse<any> = response.data;
return apiResponse.data;
}, (error: any) => {
// 對響應(yīng)錯(cuò)誤做些什么
return Promise.reject(error);
});
// 封裝 GET 請求
export function get<T>(url: string, params?: any, config?: AxiosRequestConfig): Promise<T> {
return axiosInstance.get<T>(url, { params, ...config });
}
// 封裝 POST 請求
export function post<T>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T> {
return axiosInstance.post<T>(url, data, config);
}
// 封裝 PUT 請求
export function put<T>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T> {
return axiosInstance.put<T>(url, data, config);
}
// 封裝 DELETE 請求
export function del<T>(url: string, config?: AxiosRequestConfig): Promise<T> {
return axiosInstance.delete<T>(url, config);
}
在這個(gè)示例中，我們首先定義了一個(gè)通用的響應(yīng)結(jié)構(gòu) ApiResponse，用來包裝 API 返回的數(shù)據(jù)，包括狀態(tài)碼、數(shù)據(jù)和消息等信息。然后，我們創(chuàng)建了一個(gè) Axios 實(shí)例，定義了請求和響應(yīng)攔截器，以及封裝了 GET、POST、PUT 和 DELETE 請求的函數(shù)。每個(gè)函數(shù)都使用了 Axios 實(shí)例發(fā)送請求，并處理了響應(yīng)的通用結(jié)構(gòu)，最后只返回了數(shù)據(jù)部分。
使用這些封裝的函數(shù)，可以方便地發(fā)送請求，并處理通用響應(yīng)結(jié)構(gòu)。比如，我們可以這樣使用
import { get, post } from './api';
// 發(fā)送 GET 請求
get<User[]>('/users').then(users => {
console.log(users);
});
// 發(fā)送 POST 請求
post<User>('/users', { name: 'Alice', age: 18 }).then(user => {
console.log(user);
});
其中，我們可以在函數(shù)中指定返回的數(shù)據(jù)類型，例如 <User[]> 表示返回一個(gè) User 類型的數(shù)組，或者 表示返回一個(gè) User 類型的對象。
如何在封裝的 Axios 請求中添加一些常用的功能
添加請求超時(shí)功能
在網(wǎng)絡(luò)請求中，經(jīng)常會(huì)遇到請求超時(shí)的情況，為了提高用戶體驗(yàn)，我們可以添加請求超時(shí)的功能，當(dāng)請求超過一定時(shí)間仍未返回時(shí)，自動(dòng)取消請求并拋出異常。這可以通過設(shè)置 timeout 參數(shù)來實(shí)現(xiàn)，例如：
// 封裝 GET 請求，并設(shè)置超時(shí)時(shí)間為 10 秒
export function get<T>(url: string, params?: any, config?: AxiosRequestConfig): Promise<T> {
return axiosInstance.get<T>(url, { params, ...config, timeout: 10000 });
}
在這個(gè)示例中，我們?yōu)?GET 請求添加了一個(gè)超時(shí)時(shí)間為 10 秒的選項(xiàng)。當(dāng)請求超過 10 秒仍未返回時(shí)，Axios 會(huì)自動(dòng)取消請求，并拋出一個(gè) Error 異常。我們可以在調(diào)用時(shí)捕獲這個(gè)異常，以便進(jìn)行錯(cuò)誤處理。
添加請求重試功能
有時(shí)候，在網(wǎng)絡(luò)不穩(wěn)定的情況下，請求可能會(huì)失敗，為了提高請求的成功率，我們可以添加請求重試的功能，即在請求失敗時(shí)，自動(dòng)重試一定次數(shù)，直到請求成功或達(dá)到最大重試次數(shù)為止。這可以通過設(shè)置 retry 和 retryDelay 參數(shù)來實(shí)現(xiàn)，例如：
// 封裝 GET 請求，并添加請求重試功能
export function get<T>(url: string, params?: any, config?: AxiosRequestConfig): Promise<T> {
const defaultConfig = { params, ...config };
return axiosInstance.get<T>(url, {
...defaultConfig,
retry: 3, // 最多重試 3 次
retryDelay: 1000, // 每次重試間隔 1 秒
});
}
在這個(gè)示例中，我們?yōu)?GET 請求添加了一個(gè)最多重試 3 次的選項(xiàng)，每次重試間隔 1 秒。當(dāng)請求失敗時(shí)，Axios 會(huì)自動(dòng)重試，并在達(dá)到最大重試次數(shù)后拋出一個(gè) Error 異常。我們可以在調(diào)用時(shí)捕獲這個(gè)異常，以便進(jìn)行錯(cuò)誤處理。
添加請求取消功能
有時(shí)候，在用戶操作過程中，可能需要取消正在進(jìn)行的請求，例如在切換頁面時(shí)取消上一次請求。為了實(shí)現(xiàn)這個(gè)功能，我們可以使用 Axios 的取消令牌 CancelToken 和取消函數(shù) cancel，例如：
import axios, { AxiosRequestConfig, AxiosResponse, CancelToken } from 'axios';
// 創(chuàng)建一個(gè)取消令牌
const cancelToken = axios.CancelToken.source();
// 封裝 GET 請求，并添加請求取消功能
export function get<T>(url: string, params?: any, config?: AxiosRequestConfig): Promise<T> {
const defaultConfig = { params, ...config, cancelToken: cancelToken.token };
return axiosInstance.get<T>(url, defaultConfig);
}
// 取消請求
export function cancelRequest() {
cancelToken.cancel('請求已取消');
}
在上面的示例中，我們首先創(chuàng)建了一個(gè)取消令牌 cancelToken，然后將它添加到 GET 請求的配置中。在需要取消請求的時(shí)候，我們可以調(diào)用 cancelRequest 函數(shù)來執(zhí)行取消操作。這樣就可以在需要的時(shí)候隨時(shí)取消正在進(jìn)行的請求了。
添加請求緩存功能
有時(shí)候，一些請求的結(jié)果是不會(huì)經(jīng)常發(fā)生變化的，例如用戶的基本信息，這種情況下，我們可以使用請求緩存的功能，避免重復(fù)請求，提高系統(tǒng)的性能。這可以通過緩存請求結(jié)果來實(shí)現(xiàn)，例如：
import axios, { AxiosRequestConfig } from 'axios';
// 緩存請求結(jié)果的 Map 對象
const cacheMap = new Map<string, any>();
// 封裝 GET 請求，并添加請求緩存功能
export function get<T>(url: string, params?: any, config?: AxiosRequestConfig): Promise<T> {
const cacheKey = url + JSON.stringify(params);
const cacheData = cacheMap.get(cacheKey);
if (cacheData) {
return Promise.resolve(cacheData);
}
const promise = axiosInstance.get<T>(url, { params, ...config });
promise.then((res) => cacheMap.set(cacheKey, res.data));
return promise;
}
在這個(gè)示例中，我們創(chuàng)建了一個(gè)緩存請求結(jié)果的 Map 對象 cacheMap，在 GET 請求時(shí)，我們先根據(jù)請求 URL 和參數(shù)生成一個(gè)緩存鍵 cacheKey，然后在緩存對象中查找是否存在對應(yīng)的緩存數(shù)據(jù)，如果有則直接返回，否則發(fā)送請求，并將請求結(jié)果緩存到 cacheMap 對象中。
這樣，下次發(fā)起相同的請求時(shí)，如果緩存中存在對應(yīng)的數(shù)據(jù)，就可以直接返回緩存數(shù)據(jù)，避免了不必要的網(wǎng)絡(luò)請求，提高了系統(tǒng)的性能。文章來源：http://www.zghlxwxcb.cn/news/detail-591749.html
Axios請求的優(yōu)化的一些建議
- 使用攔截器批量處理請求和響應(yīng)數(shù)據(jù)。 如果我們需要對請求和響應(yīng)進(jìn)行一系列的處理，那么每個(gè)請求都單獨(dú)處理會(huì)導(dǎo)致代碼重復(fù)和維護(hù)成本增加?？梢酝ㄟ^使用攔截器來統(tǒng)一處理，減少代碼重復(fù)。例如，可以在請求攔截器中添加公共請求頭，或者在響應(yīng)攔截器中統(tǒng)一處理錯(cuò)誤信息等。
- 合并請求，減少網(wǎng)絡(luò)請求次數(shù)。 對于一些需要發(fā)送多個(gè)請求的場景，可以將多個(gè)請求合并成一個(gè)請求，減少網(wǎng)絡(luò)請求次數(shù)，提高系統(tǒng)性能。例如，可以使用 axios.all 或者 Promise.all 方法來合并多個(gè)請求。
- 使用 Axios 的并發(fā)請求功能。 在需要發(fā)送多個(gè)請求的時(shí)候，可以使用 Axios 的并發(fā)請求功能來同時(shí)發(fā)送多個(gè)請求，提高系統(tǒng)性能。例如，可以使用 axios.spread 方法來同時(shí)處理多個(gè)請求的響應(yīng)結(jié)果。
- 配置全局默認(rèn)參數(shù)，避免重復(fù)設(shè)置。 如果在大部分請求中使用了相同的配置參數(shù)，可以將這些參數(shù)設(shè)置為全局默認(rèn)參數(shù)，避免在每個(gè)請求中重復(fù)設(shè)置。例如，可以通過 axios.defaults 來設(shè)置默認(rèn)的請求超時(shí)時(shí)間、公共請求頭等參數(shù)。
- 使用第三方插件來擴(kuò)展 Axios 功能。 如果需要使用更多的功能，可以通過使用第三方插件來擴(kuò)展 Axios 的功能。例如，可以使用 axios-mock-adapter 來模擬后端接口，或者使用 axios-retry 來實(shí)現(xiàn)請求重試功能。
版權(quán)為 OpenAI 的 ChatGPT 模型文章來源地址http://www.zghlxwxcb.cn/news/detail-591749.html
到了這里，關(guān)于使用ts封裝一個(gè)Axios請求的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
