JavaScript
Explica los estados y la resolución de una Promise, cómo funcionan then, catch y finally, y qué ocurre al retornar valores, thenables o errores.
Una representa un resultado que todavía no está disponible, pero que terminará cumplido con un valor o rechazado con una razón.
const productPromise = loadProduct("product-1");Una promesa se encuentra en uno de estos estados:
pending
├─ fulfilled → value
└─ rejected → reasonUna vez settled —cumplida o rechazada— no cambia nuevamente.
const promise = new Promise((resolve) => {
resolve("first");
resolve("second");
});
promise.then(console.log);
// "first"Una promesa puede resolverse adoptando el estado de otra promesa.
const inner = fetchData();
const outer = new Promise((resolve) => {
resolve(inner);
});outer quedó resuelta con inner, pero puede continuar pendiente hasta que inner termine.
Por eso resolved no siempre significa fulfilled inmediatamente.
console.log("A");
const promise = new Promise((resolve) => {
console.log("B");
resolve("done");
});
console.log("C");Resultado:
A
B
CLa función executor se ejecuta al construir la promesa. Las callbacks de then sí se programan como continuaciones posteriores.
function wait(delay) {
return new Promise((resolve) => {
setTimeout(resolve, delay);
});
}El constructor debe utilizarse cuando adaptas una API basada en callbacks o controlas una operación que necesita exponer resolve y reject.
No envuelvas una promesa existente sin necesidad.
Menos claro:
function load() {
return new Promise((resolve, reject) => {
fetchData().then(resolve, reject);
});
}Directo:
function load() {
return fetchData();
}function readConfiguration(storage) {
return new Promise((resolve, reject) => {
const value = storage.getItem("config");
if (value === null) {
reject(
new Error("Configuration does not exist"),
);
return;
}
resolve(value);
});
}Aunque JavaScript permite rechazar con cualquier valor, usar objetos Error conserva mejor contexto y traza.
promise.then(
(value) => {
console.log("fulfilled", value);
},
(reason) => {
console.log("rejected", reason);
},
);Normalmente se utiliza then para éxito y catch para rechazo, porque permite manejar errores del tramo anterior completo.
const nextPromise = promise.then((value) => {
return value * 2;
});nextPromise es distinta de promise.
La nueva promesa se comporta según el retorno de la callback:
| Retorno | Resultado de la nueva promesa |
|---|---|
| Valor normal | Fulfilled con ese valor |
| Promise o thenable | Adopta su resultado |
| `throw` | Rejected con ese error |
| Sin retorno | Fulfilled con `undefined` |
loadUser()
.then((user) => {
return loadOrders(user.id);
})
.then((orders) => {
console.log(orders);
});El segundo then espera la promesa retornada. No recibe una promesa anidada como valor ordinario.
loadUser()
.then((user) => {
loadOrders(user.id);
})
.then((orders) => {
console.log(orders); // undefined
});La primera callback no retornó nada. La cadena perdió la operación interna.
loadProduct()
.then(renderProduct)
.catch((error) => {
showError(error);
});catch es equivalente a:
promise.then(undefined, onRejected);Puede manejar:
loadPreferences()
.catch((error) => {
if (error instanceof PreferencesNotFoundError) {
return defaultPreferences;
}
throw error;
})
.then(applyPreferences);Retornar un valor desde catch convierte ese tramo en una promesa cumplida. Relanzar mantiene el fallo.
showLoading();
loadProducts()
.then(renderProducts)
.catch(showError)
.finally(hideLoading);finally no recibe el valor ni la razón porque su propósito normal es limpieza independiente del resultado.
Si termina normalmente, conserva el resultado anterior. Si lanza o retorna una promesa rechazada, reemplaza ese resultado.
Promise.resolve(10);
Promise.resolve(existingPromise);Normaliza valores y thenables dentro de una promesa del constructor utilizado.
Un thenable es un objeto con un método then compatible.
const thenable = {
then(resolve) {
resolve("value");
},
};
Promise.resolve(thenable)
.then(console.log);La resolución de promesas adopta thenables, no únicamente instancias nativas de Promise.
const failed = Promise.reject(
new Error("Failed"),
);La promesa ya está rechazada, pero sus manejadores continúan ejecutándose de forma asíncrona mediante jobs de promesas.
const {
promise,
resolve,
reject,
} = Promise.withResolvers();Separa la creación de la promesa de sus funciones de resolución. Puede ser útil para adaptar eventos o construir primitivas de coordinación.
No debe utilizarse para exponer resolve indiscriminadamente por toda la aplicación; quien pueda resolver la promesa controla su contrato.
const request = fetch(url);No existe request.cancel() en Promise. La operación subyacente debe aceptar una señal o mecanismo propio de cancelación.
Promise.reject(
new Error("Failed"),
);Si ningún manejador asume el rechazo, el host puede reportarlo como unhandled rejection.
No significa necesariamente que el programa se detenga igual en todos los entornos, pero indica un fallo sin responsabilidad asignada.
function waitForMessage(port) {
const {
promise,
resolve,
reject,
} = Promise.withResolvers();
function cleanup() {
port.removeEventListener("message", onMessage);
port.removeEventListener("messageerror", onError);
}
function onMessage(event) {
cleanup();
resolve(event.data);
}
function onError(event) {
cleanup();
reject(
new Error("Message could not be decoded", {
cause: event,
}),
);
}
port.addEventListener("message", onMessage);
port.addEventListener("messageerror", onError);
return promise;
}La promesa representa un solo resultado y los listeners se limpian al terminar.
then.new Promise alrededor de otra promesa sin necesidad.undefined accidentalmente.resolve y reject sin controlar quién puede usarlos.then y catch son posteriores.then, catch y finally produce otra promesa.¿Qué recibe el último then?
Promise.resolve(2)
.then((value) => value * 3)
.then((value) => {
Promise.resolve(value + 1);
})
.then(console.log);Recibe undefined. La segunda callback creó una promesa, pero no la retornó.
Encadenamiento y errores en promesas profundiza en composición, propagación, recuperación y promesas flotantes.