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. 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?