若依vue2版本封装的request如何取消请求;

520 阅读1分钟

前端项目使用若依平台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;

上述代码已经实现了取消请求,具体的一些优化还需个人调整,如常用取消请求,建议自行封装。