JavaScript
Explica cómo AbortController y AbortSignal permiten cancelar operaciones cooperativas, propagar señales y limpiar recursos cuando un flujo deja de ser necesario.
La cancelación en JavaScript es cooperativa: una señal comunica que el trabajo ya no debe continuar y la operación debe observarla.
const controller = new AbortController();
fetch(url, {
signal: controller.signal,
});
controller.abort();AbortController
└─ signal → se comparte con operaciones
controller.abort(reason)
└─ cambia signal.aborted a trueEl controller emite la decisión. La señal se distribuye.
if (signal.aborted) {
throw signal.reason;
}También existe:
signal.throwIfAborted();Esto permite fallar temprano antes de iniciar trabajo.
function wait(delay, { signal } = {}) {
return new Promise((resolve, reject) => {
signal?.throwIfAborted();
const timeoutId = setTimeout(resolve, delay);
signal?.addEventListener(
"abort",
() => {
clearTimeout(timeoutId);
reject(signal.reason);
},
{ once: true },
);
});
}Una implementación completa debe limpiar el listener también cuando el timer termina normalmente.
controller.abort(
new Error("User left the page"),
);La razón puede ser cualquier valor, aunque un Error suele ser más diagnosticable.
Muchas APIs utilizan un DOMException con nombre AbortError cuando no se proporciona otra razón.
try {
await fetch(url, { signal });
} catch (error) {
if (error.name === "AbortError") {
return;
}
throw error;
}No clasifiques todos los errores como cancelación.
const signal = AbortSignal.timeout(5000);
const response = await fetch(url, { signal });La señal se aborta después del tiempo indicado. Comprueba soporte del runtime objetivo.
const signal = AbortSignal.any([
userController.signal,
AbortSignal.timeout(5000),
]);La operación se cancela cuando cualquiera se aborta.
Una señal abortada permanece abortada.
controller.abort();
controller.signal.aborted; // trueNo reutilices el mismo controller para una operación posterior independiente.
let activeController;
async function search(query) {
activeController?.abort();
activeController = new AbortController();
const response = await fetch(
`/api/search?q=${encodeURIComponent(query)}`,
{ signal: activeController.signal },
);
return response.json();
}Cada búsqueda invalida el trabajo anterior.
async function loadDashboard(userId, { signal }) {
const [profile, orders] = await Promise.all([
loadProfile(userId, { signal }),
loadOrders(userId, { signal }),
]);
return { profile, orders };
}Una capa que inicia el flujo debe pasar la señal hacia operaciones descendientes.
Si una operación ya produjo efectos externos, abortar no los deshace.
await createPayment();
controller.abort();El pago puede existir. La cancelación detiene trabajo futuro cuando la API coopera; no crea transacciones.
await Promise.race([
fetch(url),
timeoutPromise,
]);La solicitud puede continuar aunque pierda la carrera.
Una primitiva cancelable debe retirar listeners cuando termina para evitar referencias innecesarias.
function operation({ signal }) {
function onAbort() {}
signal.addEventListener("abort", onAbort, {
once: true,
});
return doWork().finally(() => {
signal.removeEventListener("abort", onAbort);
});
}async function processItems(items, { signal }) {
const results = [];
for (const item of items) {
signal.throwIfAborted();
results.push(await processItem(item, { signal }));
}
return results;
}La señal se comprueba entre pasos y se propaga a cada operación.
throwIfAborted permite fallar temprano.¿Por qué cancelar una solicitud después de crear un recurso no elimina automáticamente el recurso?
Porque la cancelación solo comunica que debe detenerse trabajo pendiente. No revierte efectos externos que ya fueron aceptados por el servidor.
Iteración asíncrona explica cómo consumir valores que llegan gradualmente y requieren espera entre elementos.