Vue中取消接口请求的方法

1. 背景:

一个dom结构的Tab页面异步请求的接口数量多,每一个Tab页面的变量字段和接口调用都一样, 平台的接口调用出现切时部分接口正在请求的消息队列中,这时切页面会导致消息队列中的接口数据影响到切换后页面数据;

2. 问题分析:

分析: 该问题是因页面上调用的接口过多导致是加载速度慢, 在切换解决方案的时候部分异步加载的接口已经加入到消息的请求队列中此时的接口状态为 pending 状态, 这个时候需要取消状态为 pending 状态所有接口;

3. 解决方法

1、在此之前调用windows对象中Windows.stop(). 该方法的效果相当于点击了浏览器的停止按钮。由于脚本的加载顺序，该方法不能阻止已经包含在加载中的文档，但是它能够阻止图片、新窗口、和一些会延迟加载的对象的加载。

this.$router.beforeEach((to, from, next) => {
      window.stop();
      ...
});

效果如图:

OK 问题也解决啦~~~

2.还有一种方式是 可以使用Axios CancelToken.source 工厂方法创建 cancel token 取消请求。

api.ts文件

import axios from 'axios';
const CancelToken = axios.CancelToken;
let ApiCancel;
axios.get('/data_list/12345', {
  cancelToken: new CancelToken((c) => {
   /**
     * 函数接收一个 cancel 函数作为参
     * ApiCancel 也可以绑定到一个全局的对像比如Vue或者是Windows 在项目中需要的地方调用即可
     */   
    ApiCancel = c;
  })
});

// 调用
ApiCancel();

以上问题都可以取消操作,可以根据实际的不同业务选择~~~