Question

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

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

所以我的问题有解决办法吗

Answer 1

我没有测试它，但是应该可以。

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

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

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

获取请求：

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

Answer 2

来自@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并在需要时调用cancel，例如注销时，您可以调用取消所有具有cancelSource.getSource()

给出的取消令牌的请求

所以注销后

cancelSource.cancel（'CANCELLED'）;

然后，当用户再次登录时，请为此全局实例设置新的取消令牌

cancelSource.setSource（axios.CancelToken.source（））;

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

2 个答案:

编辑以回答@Suneet Jain