Vue Axios接口请求怎么取消

项目有个需求，有一个接口请求的时候时间比较长，点击取消按钮的时候把接口取消了，防止接口返回后有后续的操作。

1. 在项目中引入axios

import axios from 'axios'

2. 接口中引用

// post请求
const CancelToken = axios.CancelToken;
const source = CancelToken.source();
this.$axios.post('/api/XXX/XXX/XXX/info', {
     type: 1, // 0导入回放 1正常回放
     lineName: this.sectionName,
     folder: this.formlist.time,
     startTime: this.formlist.startTime,
     stopTime: this.formlist.endTime,
 }, {
       cancelToken: source.token
 }).then(res => {
	//	成功后的逻辑
})
// get请求
this.$axios.get('XXX/xxx/xxx',{参数: ""},{cancelToken: source.token}).then(res =>{
	//	成功后的逻辑
})

3. 取消请求

source.cancel("取消请求")

4. axios取消后会进入catch中，判断是否是取消

axios.isCancel(error) //为true时表示接口取消

参考链接
https://blog.csdn.net/wswq2505655377/article/details/129202680