import axios, { AxiosRequestConfig, AxiosResponse, AxiosError, Canceler } from 'axios';
import qs from 'qs';
interface requestMap {
[x: string]: Canceler;
}
// 存放請求實例
let requestMap: requestMap[] = [];
/**
* 創(chuàng)建xhr實例
* 路徑前綴
* 超時失敗時間
*/
const service = axios.create({
timeout: 3000,
baseURL: process.env.API_URL,
withCredentials: true
});
/**
* @desc 設置服務請求攔截器
* 定義token請求設置
*/
service.interceptors.request.use(
(config: AxiosRequestConfig) => {
// 請求頭添加權限驗證
config.headers.authorization = localStorage.getItem('auth') || '';
// post請求時轉(zhuǎn)為formdata格式參數(shù)
if (config.method === 'post') {
config.data = qs.stringify(config.data);
}
return config;
},
error => {
Promise.reject(error);
}
);
/**
* @desc 設置服務響應攔截器
* 截取返回狀態(tài) 統(tǒng)一定義成功失敗
*/
service.interceptors.response.use(
(response: AxiosResponse) => {
const data = response.data;
const code = data.code | 0;
if (code !== 200) {
// todo 非正常結(jié)果
return data;
} else {
// todo 正常結(jié)果
return data;
}
},
(error: AxiosError) => {
window?.console.log(error.message);
}
);
/**
* @desc 取消進行中的請求
* @param {string} url 請求標記(此處以請求的url為例) 傳遞字符串`all`代表取消進行中的所有請求
* @param {requestMap[]} requestMap 現(xiàn)存的所有的請求中實例
* @returns
*/
export function stopRepeatRequest(url: string, requestMap: requestMap[]) {
return new Promise(res => {
requestMap.map((ele: requestMap, index: number) => {
const key = Object.keys(ele)[0];
if (url && url === key) {
// 根據(jù)url進行定向取消請求
ele[url](`取消了 ${url} 請求`);
delete requestMap[index];
} else if (url === 'all') {
// 取消全部請求
ele[key](`取消了 ${key} 請求`);
delete requestMap[index];
}
});
res();
});
}
/**
* @desc 刪除已完成的請求標記
* @param {string} url 請求標記(此處以請求的url為例)
* @param {requestMap[]} requestMap 所有的請求實例
*/
export function deleteCompleteRequest(url: string, requestMap: requestMap[]) {
requestMap.map((ele: requestMap, index: number) => {
const key = Object.keys(ele)[0];
if (url && url === key) {
delete requestMap[index];
} else if (url === 'all') {
delete requestMap[index];
}
});
}
/**
* @desc post請求方法的封裝
* @param {string} url 請求鏈接
* @param {*} data 傳參
* @returns
*/
export async function POST(url: string, data: any) {
await stopRepeatRequest(url, requestMap);
const result = await service.post(url, data, {
cancelToken: new axios.CancelToken(c => {
requestMap.push({ [url]: c });
requestMap = requestMap.filter(v => v);
})
});
result && deleteCompleteRequest(url, requestMap);
return result;
}
axios封裝(包含取消請求)
最后編輯于 :
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
- 文/潘曉璐 我一進店門散址,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人宣赔,你說我怎么就攤上這事预麸。” “怎么了儒将?”我有些...
- 文/不壞的土叔 我叫張陵吏祸,是天一觀的道長。 經(jīng)常有香客問我钩蚊,道長贡翘,這世上最難降的妖魔是什么? 我笑而不...
- 正文 為了忘掉前任砰逻,我火速辦了婚禮鸣驱,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘蝠咆。我一直安慰自己踊东,他們只是感情好,可當我...
- 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著递胧,像睡著了一般碑韵。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上缎脾,一...
- 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼贺拣!你這毒婦竟也來了蓖谢?” 一聲冷哼從身側(cè)響起,我...
- 正文 年R本政府宣布客们,位于F島的核電站,受9級特大地震影響材诽,放射性物質(zhì)發(fā)生泄漏底挫。R本人自食惡果不足惜,卻給世界環(huán)境...
- 文/蒙蒙 一脸侥、第九天 我趴在偏房一處隱蔽的房頂上張望建邓。 院中可真熱鬧,春花似錦睁枕、人聲如沸官边。這莊子的主人今日做“春日...
- 文/蒼蘭香墨 我抬頭看了看天上的太陽注簿。三九已至契吉,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間诡渴,已是汗流浹背捐晶。 一陣腳步聲響...