Cómo parar una petición HTTP en JavaScript con AbortController
El AbortController de JavaScript es, en mi opinión, una de las funcionalidades más útiles y menos conocidas del lenguaje.
El AbortController
de JavaScript es, en mi opinión, una de las funcionalidades más útiles y menos conocidas del lenguaje. Uno de sus casos de uso es el de parar una petición HTTP (por ejemplo, para parar la descarga de un fichero o un vídeo). Además, su uso es muy simple:
const abortController = new AbortController();;
function downloadVideoInformation(id) {
const signal = abortController.signal;
return fetch(`/api/video/{id}`, { signal })
.then(res => res.json());
}
Al hacer esto, luego podremos añadir en nuestro código un botón para parar la descarga si aún no ha terminado:
cancelButton.addEventListener('click', function () {
abortController.abort();
console.log('Download aborted');
});
Además, también podemos usarlo para parar múltiples descargas a la vez:
const abortController = new AbortController();;
function downloadVideoInformation(ids) {
const signal = abortController.signal;
const promises = [];
for (const id of ids) {
promises.push(fetch(`/api/video/{id}`, { signal }).then(res => res.json()));
}
return Promise.all(promises);
}
cancelButton.addEventListener('click', function () {
abortController.abort();
console.log('Download aborted');
});
Este código inicia la descarga paralela de múltiples vídeos en nuestra API. Sin embargo, como todas las peticiones comparten el mismo signal
, al abortarlo se parará la descarga de todos los que quedan pendientes. ¿Mola, verdad?