¿Sabes en qué consiste la reescritura de funciones con promesas en JavaScript? En primer lugar, debes saber que la asincronía es una forma de escritura basada en promesas y métodos de tiempo que nos permite programar acciones para ser ejecutadas según los eventos que se den en nuestro código.
En JavaScript, una de las formas más populares de crear asincronía es con promesas. Aunque esta herramienta es muy útil para nuestros proyectos, la asincronía también puede causar caos. Por ello, muchas veces queremos que nuestro código funcione de manera asincrónica, pero que, al mismo tiempo, se vea de manera sincrónica. En este post, te enseñaremos cómo funciona la reescritura de funciones con promesas en JavaScript, el proceso que hace este lenguaje para simular sincronía.
¿Qué es la reescritura de funciones con promesas en JavaScript?
Cuando hablamos de la reescritura de funciones con promesas en JavaScript, nos referimos al cambio de sintaxis que se da entre una función construida con async y await y una construida con promesas.
Como has podido leer en nuestro post sobre async y wait en JavaScript, estas palabras clave son muy útiles para simular que un código asincrónico es sincrónico. Esta práctica nos permite mejorar la legibilidad de un código asincrónico, pues se ejecutará como si fuera sincrónico. Además, estas palabras clave pueden ser útiles para deshacer el callback hell de JavaScript, un fenómeno que ocurre por la anidación infinita de promesas o condicionales.
Este cambio de sintaxis sucede normalmente detrás de nuestra pantalla. Es decir, es JavaScript el que toma las palabras clave async y await y las transforma en promesas de manera interna. Sin embargo, comprender qué sucede detrás de escenas puede ser útil para entender el comportamiento real de async y await.
¿Cómo funciona la reescritura de funciones con promesas en JavaScript?
La reescritura de funciones con promesas en JavaScript funciona en su mayoría en los niveles bajos de nuestro proyecto, pues es aquí donde encontraremos el uso de async y await. Normalmente, una función que solo utilice la palabra clave await funcionará en los archivos top level como el index.js. En el resto de nuestro proyecto, deberemos usar async previamente al await para evitar un error de sintaxis (SyntaxError).
Ten en cuenta que existen muchos tipos de errores automáticos en este lenguaje de programación. Para conocer más sobre el objeto error y sus tipos, te recomendamos leer nuestro post sobre el objeto error en JavaScript.
Entonces, el dato principal para entender la reescritura de funciones con promesas en JavaScript es que la palabra clave async nos devuelve una promesa. Es decir, esta palabra envuelve el contenido que sigue en una promesa.
Para ejemplificar esto, debemos ver un poco de código, lo que te ayudará a entenderlo mejor. Por tanto, supongamos que hemos usado async y await en las siguientes líneas de código para hacer una llamada HTTP con la librería axios e insertar un contenido:
import axios from ‘axios’;
export async function fetchTeams (amount = 20)
const url = ‘https//liga2021’
let response = await axios.get(url)
return response.data.clubs.map (club => club.name).slice (0, amount);
}
Entonces, lo que hace internamente JavaScript es crear una promesa para envolver el contenido que sigue a async. Es decir, se creará una promesa que envuelva el contenido de la función fetchTeams. A continuación, te mostramos cómo se ve esta traducción:
export function fetchTeamsWithPromise (amount = 20)
return new Promise ((resolve, reject) => {
const url = ‘https//liga2021’
axios.get (url).then (response => {
resolve (response.data.clubs.map (club => club.name).slice (0, amount))
}).catch (e) => {
reject (error)
})
})
}
Hay que tener en cuenta que el objeto error muchas veces se reduce a e. Ten presente que la palabra error tiene mayor valor semántico que e, pero esta reducción es muy común.
Entonces, la función con promesa y la función con async que hemos escrito tienen el mismo resultado. De hecho, JavaScript traduce nuestra función con async y await a la función con promesa para procesar la asincronía y simular la sincronía.
¿Quieres seguir aprendiendo?
Ahora que sabes cómo funciona la reescritura de funciones con promesas en JavaScript, estás más cerca de dominar este complejo lenguaje de programación. En KeepCoding, estamos seguros de que quieres seguir aprendiendo sobre el mundo del desarrollo web para llegar a dominar este y muchos otros lenguajes de programación. Por ello, te invitamos a formar parte de nuestro Desarrollo Web Full Stack Bootcamp, gracias al que te convertirás en un experto del desarrollo web en pocos meses. ¿A qué esperas para inscribirte? ¡Apúntate ya!
