
En este tutorial vamos a ver como usar las promesas en JS, así como las cadenas de promesas, con ejemplos detallados.
Las promesas en JS nos permiten gestionar operaciones asíncronas. Se usan fundamentalmente para averiguar si la operación asíncrona se ha ejecutado con éxito o no.
Las promesas pueden encontrarse en uno de los siguientes estados:
- Pendiente
- Completada
- Rechazada
La promesa se inicia en estado Pendiente, que significa que el proceso no está completado. Si el proceso se completa satisfactoriamente, acabará como Completada. Si ocurre algún error, la promesa terminará como Rechazada.
Por ejemplo, cuando solicitas datos al backend usando una promesa, quedará en estado Pendiente. Cuando los datos lleguen de forma satisfactoria, pasará a estado Completada. Si hay algún error, pasará a estado Rechazada.
Crear una promesa
Para crear una promesa usaremos el constructor Promesa().
let promesa = new Promise(function(resolve, reject){
// incluye aqui tu codigo
});
El constructor recibe una función como argumento. A su vez la función recibe las funciones resolve() y reject().
Si la promesa se resuelve satisfactoriamente, llamará al código de resolve(). Si ocurre algún error, se invocará el código de reject().
Ejemplo creación promesas JS
Suponemos que el programa a continuación es asíncrono, entonces puede ser gestionado por una promesa de la siguiente forma:
const count = true;
let countValue = new Promise(function (resolve, reject) {
if (count) {
resolve("Hay un valor count.");
} else {
reject("No hay un valor count.");
}
});
console.log(countValue);
Cadena de promesas JS
Las cadenas de promesas son útiles cuando tenemos que gestionar más de una tarea asíncrona, una detrás de otra.
Puedes ejecutar una operación tras la resolución de una promesa usando los métodos then(), catch() y finally().
Método then()
Se usa con el callback cuando la promesa se completa correctamente o se resuelve.
Sintaxis:
objetoPromesa.then(onFulfilled, onRejected);
Ejemplo:
// devuelve una promesa
let countValue = new Promise(function (resolve, reject) {
resolve("Promesa resuelta");
});
// se ejecuta cuando la promesa se resuelve correctamente
countValue
.then(function exito(resultado) {
console.log(resultado);
})
.then(function exito1() {
console.log("Siguiendo este mecanismo se pueden seguir llamando funciones.");
});
Método catch()
Este método se usa con el callback cuando la promesa es rechazada o hay algún error.
Ejemplo:
// devuelve una promesa
let countValue = new Promise(function (resolve, reject) {
reject('Promesa rechazada');
});
// se ejecuta cuando la promesa se ejecuta satisfactoriamente
countValue.then(
function successValue(resultado) {
console.log(resultado);
},
)
// executes if there is an error
.catch(
function erro(resultado) {
console.log(resultado);
}
);
Método finally()
El método finally() se ejecuta cuando la promesa se resuelve satisfactoriamente o falla, en ambos casos.
Ejemplo:
// devuelve una promesa
let countValue = new Promise(function (resolve, reject) {
// puede ser resuelta o rechazada
resolve('Promesa resuelta');
});
// mas bloques de codigo
countValue.finally(
function greet() {
console.log('Se ejecuta este codigo');
}
);
Promesas vs Callback
Las promesas son parecidas a las funciones de callback, en el sentido en que ambas pueden ser usadas para gestionar tareas asíncronas. Las funciones de callback también se pueden usar para tareas síncronas.
En la siguiente tabla establecemos una comparación rápida:
Promesas | Callbacks |
Sintaxis sencilla y fácil de leer | Sintaxis complicada |
Más sencillo el manejo de errores | Más complicado el manejo de errores |
api1().then(function(resultado) { return api2() ; }).then(function(resultado2) { return api3(); }).then(function(resultado3) { // codigo propio }).catch(function(error) { // manejo de errores }); | api1(function(resultado){ api2(function(resultado2){ api3(function(resultado3){ // codigo propio if(error) { // hacer algo } else { // hacer algo } }); }); }); |
Métodos de Promesa
Método | Descripción |
all(iterable) | Espera a todas las promesas a ser resueltas o que alguna sea rechazada. |
allSettled(iterable) | Espera hasta que todas las promesas estén resueltas o rechazadas. |
any(iterable) | Devuelve el valor de la promesa tan pronto como una se complete. |
race(iterable) | Espera hasta que alguna de las promesas se complete o se rechace. |
reject(reason) | Devuelve una nueva promesa que ha sido rechazada por la razón dada. |
resolve(value) | Devuelve una promesa que ha sido resuelta con el valor dado. |
catch() | Añade un manejador del callback de rechazo. |
then() | Añade un manejador de la resolución del callback. |
finally() | Añade un manejador a la promesa. |
Más recursos JS
Prototype | Añadir propiedades de forma dinámica a un objeto |
toLocaleString | Herramienta esencial para el formateo de fechas y números en aplicaciones internacionales |
Recursividad y pila | Uso de recursividad y funcionamiento de la pila JS |
Desestructuración | Mecanismo para desempaquetar arrays y objetos |
Manejo de Strings | Manejo básico de Strings, cadenas de caracteres |
Operadores | Uso de operadores de comparación y lógicos |
Promesas | Gestión de peticiones asíncronas con promesas |
Sleep | Implementación de la función sleep() en JS |
This | Uso de la palabra reservada this en diferentes contextos |
Maps | Te enseñamos cuando usar Map y cuando Object con ejemplos |
Switchery JS | Librería para modificar el estilo de los checkbox |
Mejores libros Javascript Español | Encuentra los mejores libros para aprender JS y convertirte en el desarrollador más demandado. |
Exception JS | Manejo de excepciones en Javascript, control de errores y flujo de programa. |
Obfuscator Javascript | Protege tu código Javascript Ofuscándolo |
Javascript desde cero | Aprende los conceptos básicos de Javascript, ponte en marcha. |
Lodash | Lodash hace que la manipulación de datos en JavaScript sea más fácil y menos propensa a errores |
Formatdate JS | Formateo y trabajo con fechas en javascript de forma sencilla. |
Dayjs | Biblioteca para la gestión de fechas |
padStart | Maneja cadenas de texto con la función padStart() |