
En este art铆culo, te muestro c贸mo convertir una funci贸n con callbacks en JavaScript a una funci贸n que utiliza async/await
. Con esta t茅cnica, puedes hacer que tu c贸digo sea m谩s legible y f谩cil de mantener.
Si a煤n no est谩s familiarizado con las funciones async/await
, te explico r谩pidamente c贸mo funciona esta sintaxis.
La palabra clave async indica a JavaScript que una funci贸n es as铆ncrona, lo que significa que puede realizar operaciones de manera simult谩nea sin bloquear la ejecuci贸n del c贸digo restante.
La palabra clave await, por su parte, se utiliza dentro de una funci贸n async para esperar a que se complete una operaci贸n as铆ncrona antes de continuar con la ejecuci贸n. Esto nos permite escribir c贸digo de una manera m谩s clara y concisa. Se lee como c贸digo s铆ncrono, pero en realidad es c贸digo as铆ncrono.
Transformar una funci贸n con callback a una funci贸n async/await
Por ejemplo, si tenemos una funci贸n que utiliza una devoluci贸n de llamada para obtener datos de una API, podr铆amos convertirla a una funci贸n async/await de la siguiente manera:
// funci贸n con devoluci贸n de llamada (o callback)
function getDataCallback(callback) {
setTimeout(() => {
callback('Los datos han llegado');
}, 2000);
}
getDataCallback(data => {
console.log(data);
});
Para convertir esta funci贸n a una funci贸n async/await, debemos crear una nueva funci贸n async y utilizar la palabra clave await para esperar a que se complete la promesa.
La funci贸n async/await devolver谩 una promesa, por lo que podemos utilizar el m茅todo then()
para obtener los datos.
// funci贸n async/await
async function getDataAsync() {
const data = await new Promise(resolve => {
setTimeout(() => {
resolve('Los datos han llegado');
}, 2000);
});
return data
}
getDataAsync();
En la primera funci贸n, utilizamos una devoluci贸n de llamada (callback) para recibir los datos. En la segunda funci贸n, usamos la palabra clave await para esperar a que se complete la promesa y recibir los datos. Esto nos permite escribir el c贸digo de una manera m谩s legible y f谩cil de mantener.