Tengo un proyecto con muchas páginas (componentes) donde cada página realiza múltiples solicitudes largas de AJAX. Necesito cancelar ALGUNOS de ellos en un momento específico en el tiempo (cambiando entre páginas).

Cuando estaba usando Vue2 + vue-resource, pude poner todas mis xhrRequests en una matriz

 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) })

y en cualquier momento que quisiera, podía iterar sobre esta matriz y cancelar las solicitudes que quería cancelar. La decisión sobre qué solicitudes cancelar se tomó en función de la URL de la solicitud.

 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() } }

Ahora estoy migrando a Vue3 y necesito usar axios o Fetch API (o cualquier otra cosa). Sé que puedo usar enfoques de signal o source , pero cuando tengo muchas páginas (componentes) y cada página hace diferentes solicitudes, se vuelve complicado.

ACTUALIZACIÓN: Traté de usar axios interceptos

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

pero no puedo ver la URL en la configuración :/

¿Algunas ideas?