Axios 如何取消请求

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 4 天，点击查看活动详情

在项目开发中，有时会有这样的场景需要实现：上传一个文件，在中途想要取消。或者是，当前页面接口还没有调用完毕，就切换到下个页面。很显然，我们需要在这种时刻将接口的请求取消。

在 Axios 中我们可以使用cancel token来取消请求，具体细节可参考 Axios官方

取消接口请求的实现

在代码中可能涉及到这几种形式：

• axios 直接请求接口
• 使用文件封装 axios 后再进行请求
• 路由切换时取消请求
• 多个接口取消请求

axois 直接请求

在 axois 请求中，增加 cancelToken 参数的配置。其中调用.cancel() 函数时，参数是可选的。

import axios from 'axios';

this.source = axios.CancelToken.source();

// 调用接口
axios.post( '/api/test',data, {
    cancelToken: this.source.token
})

// 取消接口调用
handleCancel() {
    this.source.cancel('取消接口请求');
}

取消请求后，可以在控制台的 Network 看到接口的状态为 canceled

封装版本

• 最终的 cancelFn 在调用时组件中定义的变量
• 也可以封装在公共的 request 文件中

接口的封装文件：

import request from '@/utils/request'
import axios from 'axios'
const CancelToken = axios.CancelToken

export function Upload(data, that) {
    return request({
        url: '/api/test',
        method: 'post',
        data,
        cancelToken: new CancelToken(function executor(c) {
          that.cancelFn = c
        })
    })
}

使用接口文件：

data 中定义:

data() {
  return {
    cancelFn:null
  }
}

调用：

Upload(formdata,config,this)
  .then(res => {})

cancelUpload() {
 this.cancelFn('上传已取消')
}

需要注意的是：

• 当前如果没有接口发送请求中，执行这个方法会报错，所以要在执行之前确认好可执行的条件。
• 可以使用同一个 cancel token 取消多个请求

路由切换时取消请求

路由切换时取消请求的思路就是在取消请求的基础上，增加 router.beforeEach() 的路由守卫操作，在路由切换之前，遍历执行该取消方法。