async y await en JavaScript con la PokeAPI

En JavaScript, async y await son dos palabras clave que facilitan el trabajo con operaciones asíncronas, como las solicitudes a una API, de una manera que hace que el código sea más legible y fácil de entender. Estas palabras clave permiten escribir código asíncrono que se lee como si fuera código síncrono.

¿Qué son async y await?

• async: Es una palabra clave que se coloca antes de una función para declarar que esa función es asíncrona. Una función marcada como async devuelve automáticamente una promesa.
• await: Se utiliza dentro de una función async para pausar la ejecución de la función hasta que una promesa se resuelva. El código se detiene en la línea await hasta que la promesa se resuelve, luego continúa con el valor resuelto.

Ejemplo de uso de async y await con la PokeAPI

Supongamos que queremos obtener información sobre un Pokémon, como Pikachu, de la PokeAPI. Usaremos async y await para manejar la solicitud de una manera más sencilla y clara.

1// Declaramos una función asíncrona usando async
2async function obtenerPokemon(nombre) {
3  try {
4    // Usamos await para esperar a que la promesa de fetch se resuelva
5    let respuesta = await fetch(`https://pokeapi.co/api/v2/pokemon/${nombre}`);
6    
7    // Convertimos la respuesta a JSON (también espera a que la promesa se resuelva)
8    let pokemon = await respuesta.json();
9    
10    // Trabajamos con los datos del Pokémon
11    console.log("Nombre:", pokemon.name);
12    console.log("Altura:", pokemon.height);
13    console.log("Peso:", pokemon.weight);
14  } catch (error) {
15    // Manejamos cualquier error que ocurra durante la solicitud
16    console.error("Error al obtener los datos:", error);
17  }
18}
19
20// Llamamos a la función para obtener los datos de Pikachu
21obtenerPokemon("pikachu");

En este ejemplo:

• async function obtenerPokemon(nombre): Esta función se declara como asíncrona usando async, lo que significa que puede usar await dentro de su cuerpo.
• await fetch(...): Se usa await para esperar a que la promesa devuelta por fetch (la solicitud HTTP) se resuelva. Esto significa que el código no continuará hasta que se reciba la respuesta.
• await respuesta.json(): Después de obtener la respuesta, se convierte a JSON usando await, lo que garantiza que el código espere a que los datos se procesen antes de continuar.
• try...catch: Se utiliza para manejar cualquier error que pueda ocurrir durante la solicitud, como problemas de red.

Resultado: Cuando llamas a obtenerPokemon("pikachu"), verás algo como esto en la consola si la solicitud es exitosa:

Nombre: pikachu
Altura: 4
Peso: 60

Ventajas de async y await

• Código más legible: El uso de async y await hace que el código asíncrono se parezca mucho más al código síncrono, lo que facilita su lectura y mantenimiento.
• Manejo de errores simplificado: Puedes manejar errores en el código asíncrono usando try...catch, lo que es más claro que manejar errores con promesas y catch.
• Ejecución secuencial: Puedes escribir código que espera a que una promesa se resuelva antes de continuar, lo que ayuda a garantizar que las operaciones ocurran en el orden correcto.

Resumen

• async se utiliza para declarar funciones asíncronas, que siempre devuelven una promesa.
• await se utiliza dentro de funciones async para pausar la ejecución del código hasta que una promesa se resuelva.
• En el ejemplo con la PokeAPI, usamos async y await para realizar una solicitud a la API y manejar los datos de manera sencilla y clara.

El uso de async y await en JavaScript es una práctica común que simplifica enormemente la escritura y comprensión de código asíncrono, haciendo que sea más fácil trabajar con operaciones como solicitudes a APIs.