La asincronía es un concepto que surge en la programación orientada a eventos y se refiere a la posibilidad de programar acciones para ser ejecutadas en tiempos no inmediatos. JavaScript nos permite crear asincronía de muchas maneras, ya sea a través de promesas, métodos de tiempo o condicionales. Aunque este concepto trae mucha utilidad a nuestros proyectos, la asincronía también puede causar caos. Por ello, en este post, te enseñaremos cómo deshacer el callback hell en JavaScript, un fenómeno caótico que surge de la asincronía.
¿Cómo deshacer el callback hell en JavaScript?
Antes de enseñarte cómo deshacer el callback hell en JavaScript, te recomendamos leer nuestro post sobre qué es el callback hell en JavaScript para saber cómo funciona este fenómeno. Ahora, debes saber que existen dos maneras de deshacerlo:
- Una de ellas es evitar pasar funciones anónimas como parámetros.
- Otra es utilizar la palabra clave await.
¿Qué es una función anónima?
Como su categoría anónima lo indica, las funciones anónimas son aquellas funciones a las que no le hemos dado un nombre, ya sea a través de la asignación a una variable o a través de la afirmación function nombre. Esto sucede sobre todo cuando insertamos una función directamente como parámetro de un método (callback) usando arrow functions. En este proceso, solemos ignorar el nombre de la función, pues no la necesitamos llamar de nuevo.
A continuación, te ponemos un ejemplo de una función anónima:
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)
})
})
}
Nota que, dentro de la función fetchTeamsWithResponse, tenemos una función que se pasa por el método axios.get(url).then. Esta función define qué sucederá cuando se resuelve la promesa, pero no tiene un nombre asignado. A diferencia de fetchTeamsWithPromise, esta no está usando la afirmación function nombre. Tampoco está asignada a una variable nueva.
¿Cómo usar funciones nombradas para solucionar el callback hell?
Entonces, una de las maneras de deshacer el callback hell en JavaScript es a través de la creación de funciones con nombres. Lo que nos permiten las funciones con nombres es llamarlas dentro del método para crear callbacks más concisos. Teniendo como base la función anterior, podríamos nombrar nuestra función anónima de la siguiente manera:
function handleResponseTeams (response, resolve) {
return () => resolve (response.data.clubs.map (club => club.name).slice (0, amount))
}
Este método rompe la atadura o anidación del callback hell, pues deja de hacer referencia a una tras otra.
¿Cómo usar await para deshacer el callback hell en JavaScript?
Una forma más sencilla de deshacer el callback hell en JavaScript es a través de la palabra clave await. Como has podido leer en nuestro post sobre async y await en JavaScript, esta palabra nos permiten hacer que el código restante en una función espere a que determinada sección sea ejecutada. De este modo, crea la ilusión de sincronía.
Entonces, supongamos que tenemos el siguiente callback hell:
// llamar al servidor
p1.then (response => {
// enviar los datos a la db
p2.then (response2 {
// recoger el resultado de la db y escribirlo en un log
p3.then (response3 => {
// cuando el log pasa de 3MB, subirlo a un s3
p4.then (response4 => {
p5.then (response5 => {
}
A partir de este caso, podríamos usar el await de la siguiente manera:
let response1 = await p1;
let response2 = await p2;
let response3 = await p3;
let response4 = await p4;
let response5 = await p5;
Este método hará que las respuestas se inserten una dentro de otra pero el código se vea mucho más ordenado y sea independiente.
Además de estos métodos, existen muchas maneras de deshacer el callback hell en JavaScript. Desde KeepCoding, te invitamos a leer la página web callbackhell.com para conocer más sobre este fenómeno, las razones de su creación y sus posibles soluciones.
Después de leer este post, no solo has aprendido cómo deshacer el callback hell en JavaScript, sino que también te has acercado a dominar este lenguaje de programación. Ahora, el siguiente paso es dedicarte por completo a su aprendizaje y práctica. Para ello, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, donde aprenderás a dominar herramientas como JavaScript, CSS, React y HTML. ¡Anímate a dar este paso e inscríbete!
