前端项目使用若依平台vue2的版本,遇到场景需要手动取消请求,步骤如下:
1、定义request(通常放置在src/api/下)
import request from '@/utils/request'
/**
*
* @param id 请求参数
* @param cancelToken axios需要用到的cancelToken
* @returns {*}
*/
export function getData(id,cancelToken) {
return request({
url: '/getList/' + id,
method: 'get',
cancelToken: cancelToken
})
}
//重点上面的cancelToken的位置,其余参考axios的取消请求使用即可
2、页面使用
//在vue文件中引入axios
import axios from "axios";
const CancelToken = axios.CancelToken;
//data中定义变量source
data(){
return {
source:null
}
}
//在你的请求方法中使用
if (this.source) this.source.cancel('cancel request')
this.source = CancelToken.source();
const {data} = await getData(this.nodeId, this.source.token);
this.source = null;
上述代码已经实现了取消请求,具体的一些优化还需个人调整,如常用取消请求,建议自行封装。