//新建防抖閉包函數(shù)雄家，重復(fù)請求只執(zhí)行最后一次
let requestfun = (() => {
let requestList = []; //聲明一個數(shù)組用于存儲每個ajax請求的取消函數(shù)和ajax標(biāo)識
return {
removeRequest: config => {
requestList.forEach((i,n)=>{
if (i.u === `${config.url}&${config.method}`) {
//當(dāng)當(dāng)前請求在數(shù)組中存在時執(zhí)行函數(shù)體
i.f(); //執(zhí)行取消操作
requestList.splice(n, 1); //把這條記錄從數(shù)組中移除
}
})
},
setRequestList: (u, fn) => {
requestList.push({
u: u, //定義標(biāo)識符
f: fn //取消事件
});
}
};
})();
// 創(chuàng)建axios實(shí)例
const service = axios.create({
baseURL: process.env.BASE_URL, // api的baseURL
timeout: 60000 // 請求超時時間
});
// request攔截器
service.interceptors.request.use(
config => {
console.log("request===>", config);
// ------------------------------------------------------------------------------------
requestfun.removeRequest(config); //在一個ajax發(fā)送前執(zhí)行一下取消操作
config.cancelToken = new axios.CancelToken(c => {
// 這里的ajax標(biāo)識是用請求地址&請求方式拼接的字符串
requestfun.setRequestList(`${config.url}&${config.method}`, c);
});
// -----------------------------------------------------------------------------------------
return config;
},
error => {
console.log("request===error===>", error);
// Do something with request error
return Promise.reject(error);
}
);
// response 攔截器
service.interceptors.response.use(
response => {
console.log("response===>", response);
// ------------------------------------------------------------------------------------------
requestfun.removeRequest(response.config); //在一個ajax響應(yīng)后再執(zhí)行一下取消操作昭伸，把已經(jīng)完成的請求從requestList中移除
// -------------------------------------------------------------------------------------------
if (response.data.code !== 200) {
return Promise.reject(response.data.message);
}
return response;
},
error => {
return Promise.reject(error);
}
);
如何使用axios的CancelToken废膘，防止接口重復(fù)請求
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
- 文/潘曉璐 我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來谎倔，“玉大人柳击，你說我怎么就攤上這事∑埃” “怎么了捌肴？”我有些...
- 文/不壞的土叔 我叫張陵彤守，是天一觀的道長。 經(jīng)常有香客問我哭靖，道長具垫，這世上最難降的妖魔是什么？ 我笑而不...
- 正文 為了忘掉前任试幽，我火速辦了婚禮筝蚕，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘铺坞。我一直安慰自己起宽，他們只是感情好，可當(dāng)我...
- 文/花漫 我一把揭開白布济榨。 她就那樣靜靜地躺著坯沪，像睡著了一般。 火紅的嫁衣襯著肌膚如雪擒滑。 梳的紋絲不亂的頭發(fā)上腐晾，一...
- 文/蒼蘭香墨 我猛地睜開眼柠衍，長吁一口氣：“原來是場噩夢啊……” “哼洋满！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起珍坊，我...
- 序言：老撾萬榮一對情侶失蹤牺勾，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后垫蛆，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體禽最，經(jīng)...
- 正文 獨(dú)居荒郊野嶺守林人離奇死亡腺怯，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
- 正文 我和宋清朗相戀三年袱饭，在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片呛占。...
- 正文 年R本政府宣布，位于F島的核電站糙捺，受9級特大地震影響诫咱，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜洪灯，卻給世界環(huán)境...
- 文/蒙蒙 一坎缭、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧签钩，春花似錦掏呼、人聲如沸。這莊子的主人今日做“春日...
- 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至昧旨，卻和暖如春拾给，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背兔沃。 一陣腳步聲響...
- 正文 我出身青樓窄锅，卻偏偏與公主長得像，于是被迫代替她去往敵國和親缰雇。 傳聞我的和親對象是個殘疾皇子入偷，可洞房花燭夜當(dāng)晚...
推薦閱讀更多精彩內(nèi)容
- 一、簡述 在傳統(tǒng)的web項(xiàng)目中械哟，防止重復(fù)提交疏之，通常做法是：后端生成一個唯一的提交令牌(uuid)，并存儲在服務(wù)端暇咆。...
- 參考 防重復(fù)請求處理的實(shí)踐與總結(jié)使用Redis計(jì)數(shù)器防止并發(fā)請求
- 一锋爪、前言 axios的基礎(chǔ)使用就不過多的講解啦，如何使用可以看axios文檔使用說明·Axios中文說明 在這里和...
- ----歡迎查看我的博客---- 什么是fetch ??我們之前，過度過來都在用ajax扯旷，那么什么是 Fetch ...
