How to cancel same requests in Vue js? - vue.js

Question

I'm using axios <0.22 version so I can use cancelToken but I dont understand how I can use it
I tried but it doesnt work. Help me please. How cancel requests if they are calling same endpoint?
let req = {}
const authInterceptors = (cfg) => {
const config = cfg;
req = cfg;
config.headers.common['X-XSRF-TOKEN'] = antiForgeryToken;
if (req[config.url]) {
req[config.url].cancel('Automatic cancellation')
}
const axiosSource = axios.CancelToken.source()
req[config.url] = { cancel: axiosSource.cancel }
config.cancelToken = axiosSource.token
return config;
};
const errorInterceptors = (error) => {
return Promise.reject(error);
};
const httpClient = axios.create({
headers: { 'Cache-Control': 'no-cache' },
adapter: throttleAdapterEnhancer(<AxiosAdapter>axios.defaults.adapter, { threshold: 3 * 1000 }),
});
httpClient.interceptors.request.use(authInterceptors, errorInterceptors);

Answer 1

First off, just know CancelToken according to docs:
is deprecated since v0.22.0 and shouldn't be used in new projects
To use CancelToken, there's just 3 steps:
create a CancelToken
assign that token to a request
invoke the method on CancelToken
const CancelToken = axios.CancelToken;
const source = CancelToken.source();
axios.post('/user/12345', {
name: 'new name'
}, {
cancelToken: source.token
})
// cancel the request (the message parameter is optional)
source.cancel('Operation canceled by the user.');
or
const CancelToken = axios.CancelToken;
let cancel;
axios.get('/user/12345', {
cancelToken: new CancelToken(function executor(c) {
// An executor function receives a cancel function as a parameter
cancel = c;
})
});
// cancel the request
cancel();
Docs: https://axios-http.com/docs/cancellation