abort all Axios requests when change route use vue-router - ajax

Question

how can i abort / cancel Axios request before complete when i change route use
vue-router.
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
so is there any solve to my problem

Answer 1

Update: Axios (0.22.0+)
CancelToken is now deprecated. Check #m0r answer for updated solution using AbortController. Here is the link from the official documentation:
https://axios-http.com/docs/cancellation
Original answer
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
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:
axios.post('/user/12345', {
name: 'new name'
}, {
cancelToken: source.token
})
Then, within a vue-router beforeEach navigation guard you can cancel all requests using:
source.cancel('Operation canceled by the user.');
Here's the official axios guide for cancellation: https://github.com/axios/axios#cancellation

Answer 2

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.
// 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.
Edit to answer #Suneet Jain
You can create a class and create an instance which you can update
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());
You can import that instance cancelSource and call cancel when required e.g. when you logout, you can call to cancel all request which have cancellation token given by cancelSource.getSource()
So after logout
cancelSource.cancel('CANCELLED');
And when again user will login, set new cancellation token to this global instance
cancelSource.setSource(axios.CancelToken.source());

Answer 3

2022 Update | Axios (0.22.0+)
CancelToken is deprecated. AbortController should be used now in new projects. The implementation is cleaner.
const controller = new AbortController();
Pass the controller in the config parameter:
axios.get('/foo/bar', {
signal: controller.signal
}).then(function(response) {
//...
});
And to cancel the request, simply use:
controller.abort()
source : https://github.com/axios/axios#cancellation