在開發(fā)中悦屏，為了提高效率节沦，通常對(duì) Axios 進(jìn)行封裝，簡(jiǎn)化了請(qǐng)求的發(fā)送和對(duì)響應(yīng)的處理窜管。同時(shí)散劫，統(tǒng)一錯(cuò)誤處理機(jī)制有助于維護(hù)代碼的清晰和一致性。本文介紹了一些高效封裝 Axios 請(qǐng)求的方法幕帆。
封裝理念
通過(guò)創(chuàng)建一個(gè)請(qǐng)求函數(shù)获搏，我們可以隱藏 Axios 的直接調(diào)用，將請(qǐng)求的配置作為參數(shù)傳入失乾。成功的請(qǐng)求會(huì)解析（resolve）返回?cái)?shù)據(jù)常熙，失敗的請(qǐng)求則拒絕（reject）并返回錯(cuò)誤信息。promise 的使用使得處理這些行為變得異常便利碱茁。
封裝基礎(chǔ)請(qǐng)求如下所示:
function request(options) {
? return new Promise((resolve, reject) => {
?? axios(options)
? ?? .then(response => {
? ? ?? resolve(response.data);
? ?? })
? ?? .catch(error => {
? ? ?? reject(error);
? ?? });
? });
}
進(jìn)一步裸卫，封裝常用的 get 和 post 請(qǐng)求方法:
function get(endpoint, query) {
? return request({
?? method: 'get',
?? url: endpoint,
?? params: query
? });
}
function post(endpoint, payload) {
? return request({
?? method: 'post',
?? url: endpoint,
?? data: payload
? });
}
現(xiàn)在，在代碼中直接利用 get 或 post 函數(shù)即可發(fā)起請(qǐng)求纽竣。
精簡(jiǎn)重復(fù)代碼
通用設(shè)置墓贿，如 baseURL茧泪，應(yīng)當(dāng)被提取，避免每次請(qǐng)求重復(fù)聲明聋袋。
function request(options) {
? let axiosInstance = axios.create({
?? baseURL: 'https://your-api-domain.com/api/',
?? timeout: 10000
? });
? // 應(yīng)用實(shí)例配置
? options = Object.assign({}, options, { axiosInstance });
? return new Promise((resolve, reject) => {
?? axiosInstance(options)
? ?? .then(response => {
? ? ?? resolve(response.data);
? ?? })
? ?? .catch(error => {
? ? ?? reject(error);
? ?? });
? });
}
如此一來(lái)队伟，簡(jiǎn)化了通用配置的過(guò)程。
攔截器的應(yīng)用
攔截器是 Axios 的重要特性幽勒，使得對(duì)請(qǐng)求和響應(yīng)的修改變得簡(jiǎn)潔嗜侮。
// 添加請(qǐng)求攔截器
axiosInstance.interceptors.request.use(
? config => {
?? // 修改請(qǐng)求之前的配置
?? return config;
? },
? error => {
?? // 請(qǐng)求錯(cuò)誤的處理邏輯
?? return Promise.reject(error);
? }
);
// 添加響應(yīng)攔截器
axiosInstance.interceptors.response.use(
? response => {
?? // 統(tǒng)一處理響應(yīng)數(shù)據(jù)
?? return response;
? },
? error => {
?? // 統(tǒng)一處理響應(yīng)錯(cuò)誤
?? return Promise.reject(error);
? }
);
錯(cuò)誤的統(tǒng)一管理
利用 .catch 捕捉整個(gè)請(qǐng)求流程中可能出現(xiàn)的異常，簡(jiǎn)化了錯(cuò)誤處理邏輯啥容。
function request(options) {
? // ...
}
request(options)
? .then(data => {
?? // 處理請(qǐng)求成功的數(shù)據(jù)
? })
? .catch(error => {
?? // 統(tǒng)一處理請(qǐng)求異常
? });
請(qǐng)求的取消
在需要中斷請(qǐng)求時(shí), Axios 的取消令牌（cancel token）提供了便利锈颗。
const CancelToken = axios.CancelToken;
const source = CancelToken.source();
request({
? // 其他配置...
? cancelToken: source.token
});
// 如需取消請(qǐng)求
source.cancel('Operation canceled by the user.');
使用示例
以下是一個(gè)調(diào)用實(shí)例，演示了封裝函數(shù)的使用方法:
import { get, post } from './request';
get('/user', { id: '12345' })
? .then(response => {
?? console.log(response);
? })
? .catch(error => {
?? console.error(error);
? });
post('/user', { name: 'Jane' })
? .then(response => {
?? console.log(response);
? })
? .catch(error => {
?? console.error(error);
? });
通過(guò)這些方法咪惠，你可以輕松實(shí)現(xiàn)請(qǐng)求的發(fā)起和結(jié)果的處理击吱。
實(shí)用提示
把 Axios 封裝進(jìn)一個(gè)可配置的 request 方法
將基礎(chǔ)配置如 baseURL 提取出來(lái)
利用攔截器優(yōu)化請(qǐng)求與響應(yīng)的處理
通過(guò) .catch 異常處理簡(jiǎn)化錯(cuò)誤處理
支持請(qǐng)求的取消
結(jié)束語(yǔ)
對(duì) Axios 進(jìn)行恰當(dāng)?shù)姆庋b能夠大幅提升開發(fā)效率，減少重復(fù)代碼遥昧，并且集中處理錯(cuò)誤姨拥，以上提到的封裝策略都是常見(jiàn)的實(shí)踐，依據(jù)具體情況靈活調(diào)整渠鸽。
知識(shí)擴(kuò)展：
Axios 如何取消請(qǐng)求？2 種方法助你掌握請(qǐng)求的控制權(quán)
Axios 的響應(yīng)攔截器如何使用柴罐？響應(yīng)攔截器的用法以及實(shí)踐案例
參考：
