axios取消請(qǐng)求的實(shí)踐記錄分享
問題的來源
用el-autocomplete遠(yuǎn)程獲取數(shù)據(jù)時(shí)，點(diǎn)擊輸入框會(huì)觸發(fā)第一次請(qǐng)求，然后輸入搜索文字后會(huì)觸發(fā)第二次請(qǐng)求，兩次請(qǐng)求間隔較短，有時(shí)候會(huì)出現(xiàn)第二次請(qǐng)求比第一次請(qǐng)求先返回的情況，導(dǎo)致我們期望的第二次發(fā)送的請(qǐng)求返回的數(shù)據(jù)會(huì)被第一次請(qǐng)求返回的數(shù)據(jù)覆蓋掉
解決思路
在發(fā)送第二次請(qǐng)求的時(shí)候如果第一次請(qǐng)求還未返回，則取消第一次請(qǐng)求，以保證后發(fā)送的請(qǐng)求返回的數(shù)據(jù)不會(huì)被先發(fā)送的請(qǐng)求覆蓋。
axios官方文檔取消請(qǐng)求說明
方法一：
const CancelToken = axios.CancelToken;
const source = CancelToken.source();
axios.get('/user/12345', {
cancelToken: source.token
}).catch(function(thrown) {
if (axios.isCancel(thrown)) {
console.log('Request canceled', thrown.message);
} else {
// handle error
}
});
axios.post('/user/12345', {
name: 'new name'
}, {
cancelToken: source.token
})
// cancel the request (the message parameter is optional)
source.cancel('Operation canceled by the user.');
方法二：
const CancelToken = axios.CancelToken;
let cancel;
axios.get('/user/12345', {
cancelToken: new CancelToken(function executor(c) {
// An executor function receives a cancel function as a parameter
cancel = c;
})
});
// cancel the request
cancel();
不可行方案
注：本例采用的的axios的實(shí)例發(fā)送請(qǐng)求，其他情況未測(cè)試
初始方案A
請(qǐng)求時(shí)的代碼如下：
/* 接口listApi.getList方法如下 */
const CancelToken = axios.CancelToken
const source = CancelToken.source()
getVideoList ({
key
}) {
return axiosInstance.post('/video/list', {
key
}, {
cancelToken: source.token
})
},
cancelRequest () {
// 取消請(qǐng)求
source.cancel()
}
/* 頁(yè)面中獲取列表的函數(shù) */
getList (query, cb) {
// 取消之前的請(qǐng)求
listApi.cancelRequest()
// 發(fā)送請(qǐng)求
listApi.getVideoList({key: 'value'}).then(resp => {
// handle response data
}).catch(err => {
if (axios.isCancel(err)) {
console.log('Request canceled!')
} else {
this.$message.error(err.message)
}
})
}
此時(shí)chrome的Network面板并未發(fā)送getVideoList請(qǐng)求，控制臺(tái)輸出Request canceled!
原因猜想如下：
執(zhí)行l(wèi)istApi.cancelRequest()時(shí)會(huì)將listApi.getVideoList({key: 'value'})返回的Promise狀態(tài)置為reject，因此在執(zhí)行l(wèi)istApi.getVideoList({key: 'value'})時(shí)并未發(fā)送請(qǐng)求，而直接執(zhí)行catch塊中的代碼，在控制臺(tái)輸出Request canceled!。
改進(jìn)方案B
將getList方案改造如下：
/* 頁(yè)面中獲取列表的函數(shù) */
getList (query, cb) {
// 發(fā)送請(qǐng)求
listApi.getVideoList({key: 'value'}).then(resp => {
// handle response data
// 取消請(qǐng)求
listApi.cancelRequest()
}).catch(err => {
if (axios.isCancel(err)) {
console.log('Request canceled!')
} else {
this.$message.error(err.message)
}
})
}
此時(shí)發(fā)送兩個(gè)請(qǐng)求時(shí)，會(huì)在第一個(gè)請(qǐng)求返回后取消別一個(gè)請(qǐng)求，并在控制臺(tái)輸出Request canceled!，但當(dāng)取消請(qǐng)求觸發(fā)后，再次觸發(fā)getList方法時(shí)結(jié)果同方案A。
原因猜想如下：
用方法一觸發(fā)取消請(qǐng)求后，此后觸發(fā)該請(qǐng)求均返回同一個(gè)已經(jīng)被reject的Promise，因此此例中請(qǐng)求取消后再次執(zhí)行g(shù)etList方法時(shí)并未發(fā)送getVideoList請(qǐng)求，而是在控制臺(tái)直接輸出Request canceled!
可行方案
可行方案C
代碼如下：
/* 接口listApi.getList方法如下 */
const CancelToken = axios.CancelToken
let cancel
getVideoList ({
key
}) {
return axiosInstance.post('/video/list', {
key
}, {
cancelToken: new CancelToken(function executor (c) {
cancel = c
})
})
},
cancelRequest () {
// 第一次執(zhí)行videoService.cancelRequest()時(shí)還未發(fā)送getVideoList請(qǐng)求，會(huì)報(bào)錯(cuò)，添加如下判斷
if (typeof cancel === 'function') {
// 取消請(qǐng)求
cancel()
}
}
/* 頁(yè)面中獲取列表的函數(shù) */
getList (query, cb) {
// 取消之前的請(qǐng)求
listApi.cancelRequest()
// 發(fā)送請(qǐng)求
listApi.getVideoList({key: 'value'}).then(resp => {
// handle response data
}).catch(err => {
if (axios.isCancel(err)) {
console.log('Request canceled!')
} else {
this.$message.error(err.message)
}
})
}
此時(shí)重復(fù)發(fā)送多次`getVideoList請(qǐng)求時(shí)，會(huì)取消之前發(fā)送的請(qǐng)求保證返回?cái)?shù)據(jù)為最后一次請(qǐng)求返回的數(shù)據(jù)。
以上這篇axios取消請(qǐng)求的實(shí)踐記錄分享就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
使用Vite搭建vue3+TS項(xiàng)目的實(shí)現(xiàn)步驟
本文主要介紹了使用Vite搭建vue3+TS項(xiàng)目的實(shí)現(xiàn)步驟，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
Pinia 的 Setup Stores 語(yǔ)法使用實(shí)例詳解
Vue項(xiàng)目中首頁(yè)長(zhǎng)時(shí)間白屏的原因以及解決過程
Vue3前端做打印頁(yè)面信息實(shí)現(xiàn)打印功能(打印界面某個(gè)部分)
vue+elementui實(shí)現(xiàn)動(dòng)態(tài)控制表格列的顯示和隱藏
vue使用高德地圖根據(jù)坐標(biāo)定位點(diǎn)的實(shí)現(xiàn)代碼
VUE Error: getaddrinfo ENOTFOUND localhost