Saltar al contenido
Portada » Promesas JS

Promesas JS

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:

PromesasCallbacks
Sintaxis sencilla y fácil de leerSintaxis complicada
Más sencillo el manejo de erroresMá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étodoDescripció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

PrototypeAñadir propiedades de forma dinámica a un objeto
toLocaleStringHerramienta esencial para el formateo de fechas y números en aplicaciones internacionales
Recursividad y pilaUso de recursividad y funcionamiento de la pila JS
DesestructuraciónMecanismo para desempaquetar arrays y objetos
Manejo de StringsManejo básico de Strings, cadenas de caracteres
OperadoresUso de operadores de comparación y lógicos
PromesasGestión de peticiones asíncronas con promesas
SleepImplementación de la función sleep() en JS
ThisUso de la palabra reservada this en diferentes contextos
MapsTe enseñamos cuando usar Map y cuando Object con ejemplos
Switchery JSLibrería para modificar el estilo de los checkbox
Mejores libros Javascript EspañolEncuentra los mejores libros para aprender JS y convertirte en el desarrollador más demandado.
Exception JSManejo de excepciones en Javascript, control de errores y flujo de programa.
Obfuscator JavascriptProtege tu código Javascript Ofuscándolo
Javascript desde ceroAprende los conceptos básicos de Javascript, ponte en marcha.
LodashLodash hace que la manipulación de datos en JavaScript sea más fácil y menos propensa a errores
Formatdate JSFormateo y trabajo con fechas en javascript de forma sencilla.
DayjsBiblioteca para la gestión de fechas
padStartManeja cadenas de texto con la función padStart()