使用 vue-router 更改路由时中止所有 Axios 请求答案

【问题标题】：abort all Axios requests when change route use vue-router使用 vue-router 更改路由时中止所有 Axios 请求
【发布时间】：2018-12-28 13:50:32
【问题描述】：

当我更改路由使用时，如何在完成之前中止/取消 Axios 请求 Vue路由器。

当用户打开页面时，它会自动发送 axios 请求以获取一些数据，但是用户不等待得到响应然后他正在通过 vue-router 更改路由会有很多axios请求

所以我的问题有什么解决办法

【问题讨论】：

标签： ajax laravel vue.js axios vue-router

【解决方案1】：

@fabruex 的回答是正确的。我只想在这里补充一点，如果您有很多 api 调用，那么您必须在每个 api 调用配置中传递取消令牌。为了减少该代码，您可以创建 axios 实例并添加请求拦截器，该拦截器将添加该通用取消令牌，然后您可以在取消完成或您的路线更改时为令牌分配一个新值。

// Some global common cancel token source

let cancelSource = axios.CancelToken.source();

// Request interceptor

export const requestInterceptor = config => {
  config.cancelToken = cancelSource.token;
  return config;
};

// Add request interceptor like this
const request = axios.create({ baseURL: SOME_URL });
request.interceptors.request.use(requestInterceptor);


// Now you can use this axios instance like this

await request.get('/users');

// and

await request.post('/users', data);

// When you will cancel
cancelSource.cancel('Your cancellation message');

// And all the api calls initiated by axios instance which has request interceptor will be cancelled.

编辑回答@Suneet Jain

您可以创建一个类并创建一个可以更新的实例

class CancelToken {
  constructor(initialValue) {
    this.source = initialValue;
  }
  getSource() {
    return this.source;
  }
  setSource(value) {
    this.source = value;
  }
  cancel() {
    this.source.cancel();
  }
}
export const cancelSource = new CancelToken(axios.CancelToken.source());

您可以导入该实例 cancelSource 并在需要时调用取消，例如当您注销时，您可以调用取消所有具有cancelSource.getSource() 给出的取消令牌的请求

所以退出后

cancelSource.cancel('CANCELLED');

当用户再次登录时，为这个全局实例设置新的取消令牌

cancelSource.setSource(axios.CancelToken.source());

【讨论】：

有时我们同时有多个不同的请求。他们会互相取消。
如何为令牌分配新值？一旦旧请求被取消，我就无法提出新请求。
@SuneetJain 我更新了我的答案，看看。过去它对我来说效果很好，您可能需要寻找所有（2-4）个可能需要取消或设置新的场景。此全局源的取消令牌

【解决方案2】：

基本上你必须生成一个全局取消令牌

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

并通过在配置参数中传递它在所有请求中使用它

GET 请求：

axios.get('/user/12345', {
  cancelToken: source.token
}).catch(function(thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // handle error
  }
});

POST 请求：

axios.post('/user/12345', {
  name: 'new name'
}, {
  cancelToken: source.token
})

然后，在 vue-router beforeEach 导航守卫中，您可以使用以下命令取消所有请求：

source.cancel('Operation canceled by the user.');

这里是axios官方取消指南：https://github.com/axios/axios#cancellation

【讨论】：