ES6: Promesas

Hoy vamos a ver las promesas, otra de las novedades que se introducen en ES6. Seguramente, si has desarrollado algún proceso asíncrono en JS (consumir una API, por ejemplo), te hayas encontrado con lo que se llama el “callback hell”. El “callback hell” no es más que la llamada de funciones callback una tras otra, debido a que tenemos que esperar a que una función finalice para ejecutar la siguiente. Esto lo que produce, es que el código quede casi ilegible y bastante díficil de entender. Para solventar esto, en ES6 se han introducido las promesas.

Crear una promesa

Primero vamos a ver una ejemplo de cómo se haría con callbacks y después veremos, el mismo ejemplo, pero con promesas. Va a ser un simple ejemplo de dos llamadas a una API, la segunda llamada, depende de lo que nos devuelva la primera. Vamos a ver el primero con callbacks:

const request = require('request');

function requestGet(url, callback) {

request.get(url, function (error, response, body) {

if (error) {

return new Error('Error!');

}

callback(JSON.parse(body));

});

}

requestGet('https://jsonplaceholder.typicode.com/posts', function (res) {

let firstPostUser = res[0]['userId'];

console.log('firstPostUser:' + firstPostUser);

requestGet('https://jsonplaceholder.typicode.com/users/' + firstPostUser, function(res) {

console.log('Next');

console.log('User:' + res.name);

});

Ver código anterior en vivo: https://repl.it/@vreaxe/JS-Callbacks

Como ves, estoy utilizando el paquete request para hacer las llamadas a la API, creo una función con dos parámetros (uno la url y el otro la función callback que se ejecutará en caso de que todo vaya bien). La función en sí, lo que hace es utilizar el el método get del paquete request y si la llamada devuelve algún error nos devolverá “Error!” y si todo va bien ejecutará la función callback con la respuesta como parámetro.

Ahora vamos a verlo hecho con promesas:

const request = require('request');

function requestGet(url, callback) {

return new Promise((resolve, reject) => {

request.get(url, (error, response, body) => {

if (error) {

reject('Error!');

}

resolve(JSON.parse(body));

});

}

requestGet('https://jsonplaceholder.typicode.com/posts')

.then((posts) => {

let firstPostUser = posts[0]['userId'];

console.log(`firstPostUser: ${firstPostUser}`)

return requestGet(`https://jsonplaceholder.typicode.com/users/${firstPostUser}`);

})

.then((user) => {

console.log('Next');

console.log(`User: ${user.name}`);

})

.catch((err) => {

console.log(err);

});

Ver código anterior en vivo: https://repl.it/@vreaxe/ES6-Promesas-Promises

Como puedes ver la cosa cambia y se convierte en un código más legible. Se volvería muchísimo más, si en vez de utilizar funciones anónimas, las sustituyéramos por una función cada una. Entonces, donde ahora está la función anónima, estaría el nombre de la función creada y, por tanto, quedaría mucho más legible.

En cuanto al funcionamiento, lo que estamos haciendo es crear una función que te devuelve una promesa. Dentro de la función, utilizamos el método get del paquete request , como antes. Pero, en vez de pasarle una función callback, lo que hacemos es ejecutar las funciones que nos proveé la promesa que son reject para cuando hay un error y resolve para cuando se ha ejecutado correctamente. Al retornar una promesa y utilizar estas funciones, nos permite después utilizar los then y catch , cuando se ejecute resolve pasará por los then y si se ejecuta reject pasará al catch . Como en el primer then se está retornando una promesa, el segundo then tiene acceso a lo que resuelve la promesa mediante el argumento de la función y así se pueden encadenar promesas.

Estados de las promesas

Las promesas pueden tener en varios estados:

pending: es el estado inicial, aún ni se ha completado ni se ha rechazado.
fulfilled: es el estado cuando se ha completado.
rejected: es el estado cuando ha sido rechazada.

Métodos de las promesas

Promise.resolve(valor)

Devuelve una promesa resuelta con el valor pasado.

Promise.reject(razón)

Devuelve una promesa rechazada con la razón pasada.

Promise.all(iterador)

Recibe un array de promesas y espera a que se completen todas las promesas. Una vez han finalizado todas, en el then podemos acceder a los valores resueltos. Si en cualquiera de ellas hay algún error ( reject ), pasa al catch directamente.

Promise.race(iterador)

Como en el anterior, recibe una array de promesas y retorna la primera promesa de todas las del array, que se resuelva o rechace.