ES8: Async y Await

Hace un tiempo, tratamos las promesas que es una de las novedades de ES6 que nos facilita el trabajo con los procesos asíncronos de JS. Anteriormente a las promesas, se tenían que tratar con callbacks y se podía llegar a tener tantas llamadas callback, una detrás de otra, que se hacía ilegible (el llamado ‘callback hell’). Por eso aparecieron las promesas, para mejorar este problema. Ahora en ES8, se presenta una característica que mejora aún más el trato de los procesos asíncronos que son las funciones asíncronas.

Las funciones asíncronas son funciones que devuelven promesas y se tienen que declarar con la keyword async delante de la declaración de la función. Solamente dentro de este tipo funciones, podremos utilizar la keyword await y lo que indicará es que se detenga hasta que la promesa de la función a la que se lo pongamos no esté resuelta. Una vez esté resuelta, continuará con la ejecución normal. Por tanto, si utilizamos async/ await, ya no tendremos que utilizar ni el then ni el catch de las promesas y se simplificará todo mucho más pudiendo ejecutar código asíncrono como si fuese síncrono.

Explicado todo ésto, vamos a ver un ejemplo. Para el ejemplo, voy a partir del código del post sobre las promesas y vamos a transformarlo a funciones asíncronas:

const fetch = require('node-fetch');

// declaración de función asíncrona

async function requestGet(url) {

let response = await fetch(url);

if (response.ok) {

return await response.json();

}

throw new Error(`Status: ${response.status}, Status text: ${response.statusText}`);

}

// llamada con función asíncrona

(async () => {

try {

const posts = await requestGet('https://jsonplaceholder.typicode.com/posts');

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

// console.log(firstPostUser);

const user = await requestGet(`https://jsonplaceholder.typicode.com/users/${firstPostUser}`);

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

} catch (err) {

console.log(err);

}

})();

// llamada con promesas

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(`User: ${user.name}`);

})

.catch((err) => {

console.log(err);

});

Ver código anterior en vivo: https://repl.it/@vreaxe/ES8-Async-y-Await

Primero, en vez de utilizar el paquete de request que utilizamos en el ejemplo de las promesas, vamos a utilizar el paquete node-fetch. Este paquete nos permitirá usar la función fetch en Node.js, que es el entorno donde estamos ejecutando el código en Repl.it. Si lo estas ejecutando en tu local en un navegador directamente, sin Node.js, no te hará falta instalar el paquete, ya que la función fetch es una función nativa de JS.

Transformamos la funcón requestGet a una función asíncrona. Añadiendo el async en la declaración y el await en las llamadas que tendremos que esperar a que se resuelva la promesa antes de continuar. Devolvemos el JSON si todo ha ido correctamente, si no lanzamos un error.

Como ves, podemos llamar a la función asíncrona de dos manera. La primera es declarando una función asíncrona anónima y que se ejecute inmediatamente o una función asíncrona normal, no tiene porque ser anónima. La otra es con las promesas que es igual que en el ejemplo de las promesas porque, como he dicho anteriormente, las funciones asíncronas devuelven promesas.

Deja una respuesta Cancelar la respuesta