解决思路
在发送第二次请求的时候如果第一次请求还未返回,则取消第一次请求,以保证后发送的请求返回的数据不会被先发送的请求覆盖。
axios官方文档取消请求说明
方法一:
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();
可行方案
代码如下:
/* 接口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 () { // 第一次执行videoService.cancelRequest()时还未发送getVideoList请求,会报错,添加如下判断 if (typeof cancel === 'function') { // 取消请求 cancel() } } /* 页面中获取列表的函数 */ getList (query, cb) { // 取消之前的请求 listApi.cancelRequest() // 发送请求 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) } }) }
此时重复发送多次`getVideoList
请求时,会取消之前发送的请求保证返回数据为最后一次请求返回的数据。