laravel 更改路由时中止所有 Axios 请求使用 vue-router
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/51439338/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
abort all Axios requests when change route use vue-router
提问by Ghyath Darwish
how can i abort / cancel Axios request before complete when i change route use vue-router.
当我使用 vue-router 更改路由时，如何在完成之前中止/取消 Axios 请求。
when user open page it automatically send axios request to get some data, but user don't waiting to get response then he is changing route by vue-router it will be a lot of Axios requests
当用户打开页面时，它会自动发送 axios 请求以获取一些数据，但是用户不会等待获得响应然后他正在通过 vue-router 更改路由，这将是很多 Axios 请求
so is there any solve to my problem
那么我的问题有什么解决办法吗
采纳答案by fabruex
Basically you have to generate a global cancel token
基本上你必须生成一个全局取消令牌
const CancelToken = axios.CancelToken;
const source = CancelToken.source();
and use it in all your requests by passing it in the config parameter
并通过在 config 参数中传递它来在所有请求中使用它
GET request:
获取请求：
axios.get('/user/12345', {
cancelToken: source.token
}).catch(function(thrown) {
if (axios.isCancel(thrown)) {
console.log('Request canceled', thrown.message);
} else {
// handle error
}
});
POST request:
POST请求：
axios.post('/user/12345', {
name: 'new name'
}, {
cancelToken: source.token
})
Then, within a vue-router beforeEachnavigation guard you can cancel all requests using:
然后，在 vue-routerbeforeEach导航守卫中，您可以使用以下方法取消所有请求：
source.cancel('Operation canceled by the user.');
Here's the official axios guide for cancellation: https://github.com/axios/axios#cancellation
这是官方的 axios 取消指南：https: //github.com/axios/axios#cancellation
回答by Zohaib Ijaz
Answer from @fabruex is correct. I just wanted to add here that if you have lot of api calls then you have to pass cancellation token in each api call config. In order to reduce that code, you can create axios instance and add request interceptor which will add that common cancellation token and then you can assign a new value to token when cancellation is done or your route has changed.
@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.