axios取消请求的实践记录分享

改进方案B

将getList方案改造如下：

/* 页面中获取列表的函数 */
getList (query, cb) {
 // 发送请求
 listApi.getVideoList({key: 'value'}).then(resp => {
 // handle response data
 // 取消请求
 listApi.cancelRequest()
 }).catch(err => {
 if (axios.isCancel(err)) {
  console.log('Request canceled!')
 } else {
  this.$message.error(err.message)
 }
 })
}

此时发送两个请求时，会在第一个请求返回后取消别一个请求，并在控制台输出Request canceled!，但当取消请求触发后，再次触发getList方法时结果同方案A。

原因猜想如下：

用方法一触发取消请求后，此后触发该请求均返回同一个已经被reject的Promise，因此此例中请求取消后再次执行getList方法时并未发送getVideoList请求，而是在控制台直接输出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 () {
 // 第一次执行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请求时，会取消之前发送的请求保证返回数据为最后一次请求返回的数据。

以上这篇axios取消请求的实践记录分享就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。