La asincronía es uno de los aspectos más relevantes de JavaScript frente a otros lenguajes de programación. Para tratar con este aspecto, podemos utilizar dos herramientas clave: las promesas o las funciones con async y await. En este post, te enseñaremos cómo transformar promesas con async y await para que puedas simplificar la sintaxis de tus procesos asíncronos.
¿Cómo transformar promesas con async y await?
En nuestro post sobre la diferencia entre promesas y async y await, te explicamos que las funciones con las palabras clave async y await son conocidas como azúcar sintáctico. Esto se da porque las funciones de este tipo no necesariamente aportan un valor agregado a las promesas, pero ejecutan sus mismas acciones con una sintaxis mucho más simple. A continuación, te enseñaremos cómo hacer el paso de la sintaxis de promesas a la de async y await.
Si quieres conocer más sobre estos métodos, te recomendamos leer el artículo función aysnc en la página oficial de Mozilla Developer Network.
Para enseñarte cómo transformar promesas con async y await, usaremos líneas de código de ejemplo. A continuación, te demostramos una función en la que usamos promesas para hacer una llamada a una API y tratar sus datos, que en este ejemplo serán unos tweets:
getDataWithPromise ( ) {
const url = «https://urldeunapiejemplo.com»
return new Promise (function (resolve, reject) {
fetch (url)
.catch ((error) => {
reject («No he podido ir por los tweets»);
})
.then ((responseHttp) => {
console.log (responseHttp);
return responseHttp.json ( );
})
.catch ((error) => {
console.log (error);
reject («No he podido transformar la respuesta a json);
})
.then ((data) => {
resolve (data);
});
});
Ahora que tenemos nuestras líneas de ejemplo, veamos cómo se pueden transformar promesas con async y await.
El primer paso en esta transformación será crear una nueva función que se dedique a tomar datos usando async. Para ello, debemos añadir la palabra clave async a la función. Dentro de ella, se mantendrá la constante url, pero se eliminará la declaración de la nueva instancia del objeto promise.
async getDataWithAsync ( )
const url = «https://urldeunapiejemplo.com»
Con esta función, debemos revisar las transformaciones que podemos hacer. A continuación, te contaremos algunos secretos para que la veas más claramente.
Ten presente que los puntos a continuación son tan solo orientativos. Esto quiere decir que deberás revisar en cada caso si los siguientes secretos aplican:
- Normalmente, donde veamos una promise es donde deberemos añadir un async. (new Promise —> async)
- En este sentido, donde veamos un método then, será donde tendremos un await. (.then —> await)
- Cualquier método que use await tiene que ser async.
Ahora que conocemos estos secretos, podemos transformar las líneas de código anteriores en nuestra función getDataWithAsync. A continuación, te mostramos cómo se ve esta transformación suponiendo que la petición a Fetch ha salido bien y no hay que capturar ningún error con catch.
Si lo que quieres es aprender cómo se capturan errores en funciones con las palabras clave async y await, te recomendamos leer nuestro por sobre controlar errores con funciones async y await.
async getDataWithAsync ( ) {
const url = «https://urldeunapiejemplo.com»
const response = await fetch (url)
const tweets = await response.json ( )
return tweets;
},
Como puedes ver, en las líneas anteriores hemos pasado el primer then a una constante response con la petición URL.
const response = await fetch (url);
Por tanto, la anterior línea await es lo mismo que una petición HTTP hecha con Fetch y métodos de promesas, como la siguiente.
fetch (url).then ((response) => {
resolve (response)
})
Luego, hemos pasado el segundo then, encargado de transformar la respuesta a JSON, a una constante tweets en la que accedemos a response y le aplicamos el método json. Todo este proceso se simplifica mucho cuando decidimos transformar promesas con async y await.
¿Cuál es el siguiente paso?
Ahora que sabes cómo transformar promesas con async y await, ¡te invitamos a usar este conocimiento para crear asincronía en tus propios proyectos! Si quieres seguir aprendiendo sobre el desarrollo de todo tipo de proyectos web, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, un espacio de formación íntegra e intensiva donde empezarás a escribir tus propias líneas de código con la guía de nuestros profesores. ¡No esperes más e inscríbete ahora!
