Async y await pueden parecer complicados… pero son tan fáciles como una tarta de pizza una vez que te sumerges en ellos.
Todos utilizamos async y await en nuestras rutinas diarias.
¿Qué es una tarea asíncrona?
Una tarea async te permite completar otras tareas mientras la tarea asíncrona sigue trabajando para completarse.
He aquí algunos ejemplos de tareas async del día a día
Ejemplo 1:
Pides comida en un autoservicio, lo que inicia tu solicitud de comida (una tarea asíncrona).
Avanzas en la cola del autoservicio (la siguiente tarea), mientras se prepara tu comida.
No tienes que esperar a que tu comida esté lista para poder avanzar.
Estás esperando tu comida y tu solicitud se cumple en la ventanilla de recogida.
Ejemplo 2:
Friegas el suelo de tu cocina.
Mientras esperas a que se seque el suelo de la cocina, aspiras la alfombra de tu habitación.
La tarea original era limpiar el suelo de tu cocina, y la tarea se completa cuando el suelo está seco.
Quedarse parado esperando a que se seque el suelo no es demasiado productivo, así que aspiras el suelo del dormitorio mientras se seca el de la cocina.
Así es como Javascript maneja también las funciones asíncronas.
Ejemplo de async/await- Hornear una pizza congelada
Decides hornear una pizza en tu horno, y tu primer paso es precalentar el horno.
Así que estableces la temperatura deseada y empiezas a precalentar el horno.
Mientras el horno se precalienta, sacas la pizza congelada del congelador, abres la caja y la pones en un molde para pizza.
¡Te queda tiempo!
Tal vez cojas una bebida y veas algo de televisión mientras esperas a que el horno emita un pitido cuando esté listo.
A continuación encontrarás un código para simular este ejemplo:
// Esta función asíncrona simula la respuesta del horno
const ovenReady = async () => {
return new Promise(resolve => setTimeout(() => {
resolve('Beep! ¡Horno precalentado!')
}, 3000));
}
// Definir la función asíncrona precalentarHorno
const precalentamientoHorno = async () => {
console.log('Precalentamiento del horno.');
const response = await hornoListo();
console.log(response);
}
// Define the other functions
const getPizzaCongelada = () => console.log('Getting pizza.');
const openPizzaCongelada = () => console.log('Abriendo pizza.');
const getBandejaPizza = () => console.log('Getting bandeja.');
const ponerPizzaEnLaBandeja = () => console.log('Poniendo la pizza en la bandeja.');
const cogerUnaBebida = () => console.log('Tomar una bebida.');
const watchTV = () => console.log('Viendo la televisión.');
// Now call the functions
precalentamientoHorno();
getPizzaCongelada();
openPizzaCongelada();
getBandejaPizza();
ponerPizzaEnLaBandeja();
cogerUnaBebida();
watchTV();
// Output sequence in console:
Precalentar el horno.
Getting pizza.
Abriendo pizza.
Getting bandeja.
Poniendo la pizza en la bandeja.
Tomar una bebida.
Viendo la televisión.
Beep! ¡Horno precalentado!El proceso anterior es exactamente lo que significa async y await.
Mientras esperamos a que se complete la función asíncrona precalentamientoHorno, podemos realizar tareas síncronas como getPizzaCongelada, openPizzaCongelada, getBandejaPizza, ponerPizzaEnLaBandeja, cogerUnaBebida e incluso watchTV.
Realizamos tareas asíncronas como ésta todo el tiempo
Y así es como funciona también el async en Javascript.
Fíjate en que cuando esperamos la respuesta de una función asíncrona, ésta debe ser llamada dentro de otra función async. Eso es lo que vemos arriba cuando se llama a hornoListo dentro de precalentamientoHorno.
Hay que recordar dos puntos clave:
Javascript NO esperará a que una función asíncrona como precalentarHorno se complete antes de pasar a las tareas que le siguen como getPizzaCongelada y openPizzaCongelada.
Javascript esperará a que una función async como hornoListo se complete y devuelva datos antes de pasar a la siguiente tarea dentro de una función asíncrona padre. Lo vemos cuando la sentencia console.log(response) no se ejecuta hasta que hornoListo haya devuelto una respuesta.
Si el ejemplo de la pizza no te sirve…
Sé que los ejemplos cotidianos ayudan a algunos de nosotros, pero otros pueden preferir el código real.
Por lo tanto, voy a proporcionar a continuación un ejemplo de async y await JavaScript menos abstracto que solicita datos con la API Fetch:
Ejemplo de código de asíncrono/espera en JavaScript
const getTheData = async () => {
try {
const response = await fetch('https://jsonplaceholder.typicode.com/users');
if (!response.ok) throw Error();
const data = await response.json();
// hacer algo con estos datos... guardar en la db, actualizar el DOM, etc.
console.log(data);
console.log('Verás que esto es lo último.')
} catch (err) {
console.error(err);
}
}
getTheData();
console.log('Esto es lo primero que verás.');Conclusión
Espero haberte ayudado a entender async y await en JavaScript.
Sé que puede llevar un tiempo comprenderlo del todo.
Empieza a precalentar el horno para la pizza que te apetece y mira más ejemplos de async y await mientras esperas el pitido.
