Vue接口请求取消（AbortController 和 CancelToken）

先上Axios官网文档：https://www.axios-http.cn/docs/cancellation

使用场景：页面切换时，取消掉未调用完成的接口；流程中主动取消某些接口。

目前有两种取消接口请求的方式：

• AbortController
• CancelToken

这里只写一种实际使用方式：

• 接口：

// 接口文件用了项目中封装过的请求函数，主要关注关键代码。

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

// 额外传入一个 that
export function getList(data, that) {
  return request({
    url: '/test/list',
    method: 'post',
    data: dataToFormData(data),
    // 关键代码 cancelToken
    cancelToken: new CancelToken((c) => {
      that.cancel = c
    })
  })
}

• 使用：

// 调用接口时，除了本身的传参，额外传一个this
getList(this.listQuery, this)
	.then((res) => {})
	.catch((err) => {})

// 在需要取消的位置执行以下代码即可
this.cancel('请求取消')