Siguiendo con la serie de artículos sobre Promises en Javascript en donde quiero repasar las principales características de este objeto que tanto ha servido para llevar al lenguaje a un nuevo nivel, hoy quiero hablaros del encadenamiento de promesas, o dicho en inglés que suena menos rimbombante: “promises chaining”.

A lo largo del artículo veremos cómo podemos ir ejecutando Promesas encadenadas a medida que se van resolviendo los resultados de cada una de ellas gracias a la instrucción then .

¡Vamos allá!

Encadenando promesas

Una de las características más potentes de los objetos Promise es la posibilidad de encadenar su ejecución sin tener que caer en lo que antaño se conocía como el “callback hell”:

Es decir, múltiples anidamientos para ejecutar código a medida que obteníamos los resultados.

Gracias a las Promises pasamos de tener lo que habéis visto en la imagen a algo muchísimo más limpio:

¿Cómo funciona? Muy sencillo. El método then recibe como primer argumento una función que se ejecuta en el caso de que la Promesa a la que se ha “adjuntado” se resuelva correctamente (estado “fullfilled”). Esta función que pasamos a then recibe como argumento el valor devuelto por la Promise y nos permite devolver otro valor.

Si a este primer then le concatenamos otro then , la función que pasemos como argumento a este último then recibirá lo que devolvimos en el primero, pudiendo repetir el proceso tantas veces como queráis tal y como veis en la imagen:

• En la línea 2 resolvemos la promesa con el valor promises .
• En la línea 3, la función pasada al primer then recibe como argumento el string promises y le concatena en la línea 5 el string are para devolverlo a continuación.
• En la línea 6, la función pasada al segundo then recibe el string concatenado que devolvimos en el paso anterior y vuelve a concatenar otro string y devolver el resultado.
• Y así podemos seguir hasta el infinito y más allá.

Toda esta concatenación es posible gracias a que promise.then devuelve una Promise , de modo que podemos adjuntarle otro nuevo then .

❗️ Pero cuidado…

Hay que saber que una cosa es concatenar promesas mediante sucesivos then como hemos hecho en el ejemplo anterior y otra es realizar lo siguiente:

En este caso estamos adjuntando varios then a la promesa pero no estamos concatenando la ejecución de ellos, de modo que todos reciben el mismo valor en el argumento result : el string promises devuelto por la promesa que contenía el setTimeout .

Devolver promesas dentro de then

Por supuesto no sólo podemos devolver un valor dentro del método then , sino que podemos crear otra promesa y devolverla para que el siguiente then “espere” a que se resuelva:

En este caso, el timeout de la línea 2 fuerza a que el then de la línea 3 espere 1 segundo para obtener el valor con el string “promises”. A continuación, dentro de este then devolvemos una nueva promesa con otro timeout que al resolverse pasará al then de la línea 8 el string “promises are”.

Este then de la línea 8 habrá esperado en total 2 segundos.

El ejemplo de fetch

La API nativa fetch es uno de los ejemplos de cómo podemos encadenar promesas para obtener el resultado de una API externa.

Cuando invocamos esta función:

const promise = fetch('https://reqres.in/api/users?page=2')

Lo que obtenemos es una promesa que se resolverá una vez que la llamada asíncrona se haya resuelto y que devolverá un objeto response :

fetch('https://reqres.in/api/users?page=2')
  .then(function(response) {
    // do something
  });

Sobre este objeto response podemos invocar los métodos:

• response.text() para obtener el contenido de la respuesta en formato texto.
• response.json() para realizar su conversión a JSON.
• O response.blob() en el caso de que hayamos recibido un archivo.

Estos 3 métodos devuelven una promise a la que podemos concatenar un nuevo then para obtener finalmente el valor en el formato que queramos:

fetch('https://reqres.in/api/users?page=2')
  .then(function(response) {
    return response.json();
  })
  .then(function(json) {
    console.log(json);
  });

Conclusiones

Gracias a que then devuelve siempre una promesa (bien con el valor que establezcamos bien con una nueva Promesa) podemos encadenar tantas promesas como queramos. La ventaja sobre los “callback” es que este encadenamiento se produce al mismo nivel por lo que no se acaba cayendo en el famoso “callback hell” del que os hablaba en el principio.

Nos vemos en el siguiente capítulo de esta serie!

¿Quieres recibir más artículos como este?

Si te ha gustado este artículo te animo a que te suscribas a la newsletter que envío cada domingo con publicaciones similares a esta y más contenido recomendado: 👇👇👇

Apóyame en Patreon

🧡🧡🧡 Gracias a: Joseba, Alex y Jorge.