¿Por qué se introdujo la construcción async/await y cómo mejora el trabajo con código asíncrono?

Async/await fue introducido para simplificar la escritura de código asíncrono, haciéndolo más legible y mantenible en comparación con los callbacks o promesas tradicionales.

Cómo mejora:

1. Legibilidad: El código con async/await parece síncrono, línea por línea, lo que facilita su comprensión.
2. Manejo de errores: Permite usar construcciones estándar como try/catch para manejar errores en código asíncrono, a diferencia de .catch() en promesas.
3. Depuración: Los puntos de interrupción (breakpoints) funcionan igual que en código síncrono, facilitando el proceso de depuración.
4. Menos "callback hell": Elimina el problema de callbacks anidados, que conduce a código ilegible.

Ejemplo:

Código con promesas:

// Ejemplo con promesas
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Error fetching data:', error);
  });

El mismo código con async/await:

// Ejemplo con async/await
async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

fetchData();

La construcción async/await está basada en promesas y es azúcar sintáctico para trabajar con ellas. La función marcada como async siempre devuelve una promesa. El operador await solo puede usarse dentro de funciones async y "espera" la resolución de la promesa, devolviendo su valor resuelto o generando una excepción en caso de error.