vue3已封装好的请求控制axios请求取消

内容并不多，写的目的主要是百度翻了好多都是直接从官网上抄写案例或者是比较复杂的方法封装嵌套，并没有直接在项目中的简单应用，所以就想写一下笔记记录如何在已经封装的请求的基础上再实现可以选择取消请求的功能。

具有有两种方式实现。

方式一：CancelToken.source 工厂方法创建一个 cancel token。

这个方法用于如果你想永久取消这个请求以及之后所有相同的请求使用。就是你使用这个以后，后续你再调用这个请求还是会被取消的；

1.在你封装接口的js代码中引入

import axios from 'axios';
const source = axios.CancelToken.source();

2.在封装的接口中创建一个 cancel token

export function listUser(query) {
  return request({
    url: '/system/user/list',
    method: 'get',
    params: query,
    // 将 cancelToken 属性设置为上面创建的 CancelToken 实例
    cancelToken: source.token,
  });
}

3.导出取消请求方法。

export function axiosCancel() {
  // 取消之前的请求
  source.cancel('取消之前的请求');
}

4.页面调用 页面使用就引入请求方法然后使用就可以了

<el-button icon="Refresh" @click="Axioscancel">取消</el-button>

function Axioscancel() {
  userApi.axiosCancel()
}

实现效果就是这样了

方式二：传递一个 executor 函数到 CancelToken 的构造函数来创建一个 cancel token 

这个方法就是只会取消你操作的那一次请求以及之前发过的相同请求，之后你再次发起请求如果你不触发取消请求事件它是可以继续发请求的。一般用于你只想取消这次请求以及之前的相同请求的时候使用

1.引入

import axios from 'axios';
let cancelToken = axios.CancelToken;
let cancel;

2.创建一个 cancel token

export function listUser(query) {
  return request({
    url: '/system/user/list',
    method: 'get',
    params: query,
    cancelToken: new cancelToken(function executor(c) {
      // executor 函数接收一个 cancel 函数作为参数
      cancel = c;
    }),
  });
}
export function axiosCancel() {
  cancel();
}

然后页面调用是一样的。

总结：需要将请求永久取消使用方式一，只是需要将请求取消一次请用方式二。