I have a project with many pages (components) where each page is making multiple long AJAX requests. I need to cancel SOME of them in a specific moment in time (switching between pages).

When I was using Vue2 + vue-resource I was able to put all my xhrRequests into array

Vue.http.get(url + action, {
   params: params, 
   before: function (xhr) {
      Vue.xhrRequests.push(xhr)
  }
}).then((response) => {
  helper.success(response)
}).catch(function (error) {
  helper.failure(error)
})

and anytime I wanted I could iterate over this array and cancel requests I wanted to cancel. Decision about which requests to cancel was made based on request URL.

  for (let i = 0; i < Vue.xhrRequests.length; i++) {
    if (Vue.xhrRequests[i].url.indexOf('news') >= 0 && Vue.xhrRequests[i].url.indexOf('select') < 0) {
      Vue.xhrRequests[i].abort()
    }
  }

Now I am migrating to Vue3 and I need to use axios or Fetch API (or anything else). I know I can use signal or source approaches, but when I have a lot of pages (components) and each page is making different requests it's getting tricky.

UPDATE: I tried to use axios interceptos

axios.interceptors.request.use(function (config) {
   console.log(config)
   return config;
}, function (error) {
   return Promise.reject(error);
});

but I can't see URL in config :/

Any ideas?