axios 连续多次请求同一接口，取消上一次请求

问题描述：在项目中遇到这么一个问题，有一个目录树，点击目录树就会请求对接数据，接口调用同一个，只是参数不同，刚开始的做法是监听目录树的点击事件，只要有点击事件触发，就会调用接口请求数据，这样做初步实现。网络延迟或接口返回数据慢的情况，添加了loading增加用户体验

解决方案

网上查找了好多资料，大同小异都提到了axios 中的一个属性‘cancelToken’，官网对cancelToken的描述不是很多，用法也模模糊糊，通过很多的解决方案，根据自己的理解，总结如下:

官网对CancelToken解释，用法

// 第一种：可以使用 CancelToken.source 工厂方法创建 cancel token，像这样：
var CancelToken = axios.CancelToken;
var source = CancelToken.source();

axios.get('/user/12345', {
  cancelToken: source.token
}).catch(function(thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // 处理错误
  }
});
// 取消请求（message 参数是可选的）
source.cancel('Operation canceled by the user.');
// 第二种：还可以通过传递一个 executor 函数到 CancelToken 的构造函数来创建 cancel token：
var CancelToken = axios.CancelToken;
var cancel;

axios.get('/user/12345', {
  cancelToken: new CancelToken(function executor(c) {
    // executor 函数接收一个 cancel 函数作为参数
    cancel = c;
  })
});
// 取消请求
cancel();

官网用法好像挺简单的，但是运用到项目中不知道怎么加进去，因为我对axios做了封装

// request.js
import axios from 'axios'  //引入axios
import * as Setting from '@/setting.js'  //这里设置环境
//创建一个axios示例
const service = axios.create({
//全局的 axios 默认值
  baseURL:Setting.requestPath , //请求基路径，根据node的环境变量来匹配我们的默认的接口url前缀
  timeout:3000  //超时
})
export default service

这样封装完了之后我只是针对某些接口需要取消上次请求，大部分不用，那就不好加了，但是参考官网用法，结合我使用封装之后的axios，用法如下

import axios from 'axios';
import request from '@/utils/request'
let CancelToken = axios.CancelToken;
window.cancle = null
export const queryResourceTable = function (params) {
    return request({
        url: '/remote/getResourceList',
        method: 'get',
        params,
        cancelToken:new CancelToken(function executor(c) { 
            window.cancle = c;
        })
    });
};

使用

import { queryResourceTable } from '@/api/index'
async getData(){
     // 取消上一次请求
     window.cancle && window.cancle()
     let data  = await queryResourceTable()
}

这样的话我们每次调用这个接口，如果上次或者上上次调用因为网络延时或者接口请求慢还没有响应，就会取消，重新发起一个新的请求，就不会出现开始说的那个问题
如果一个项目中有多个接口需要取消上次请求，那么我们只需要给window上挂载一个属性统一管理

import axios from 'axios';
import request from '@/utils/request'
let CancelToken = axios.CancelToken;
window.cancle = {}
export const queryResourceTable = function (params) {
    return request({
        url: '/remote/getResourceList',
        method: 'get',
        params,
        cancelToken:new CancelToken(function executor(c) { 
            window.cancle.resourceTable = c;
        })
    });
};
// 调用
window.cancle.resourceTable && window.cancle.resourceTable()

最后编辑于：2021.04.15 16:54:34