路由跳转时放弃正在pending的请求

1

在单页面应用中通常会对请求进行catch处理，如果用户打开a页面后页面发出了一个请求去获取aaa，但是由于某种原因请求一直在pending。此时用户又进入了b页面，在浏览时a页面的请求失败了，然后页面弹出提示：“数据aaa请求失败”。这就很尴尬了。虽然在对于a页面没什么问题，但是对于b页面来说这就是无用的提示。这时就需要在跳转页面时杀掉正在pending的请求了

axios的cancelToken

https://www.kancloud.cn/yunye/axios/234845

使用 cancel token 取消请求
可以使用 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();

vue路由跳转时cancel请求

定义请求services.js

import axios from 'axios';

const url = 'h