Programación Asíncrona en JavaScript: Guía Completa de async/await

---

¿Qué es la Programación Asíncrona en JavaScript?

A continuación, se explican algunos conceptos clave en la programación asíncrona.

Callbacks

Un callback es una función que se pasa como argumento a otra función y se ejecuta después de que se completa la operación. Los callbacks son una forma de manejar la asincronía en JavaScript. En este ejemplo, la función obtenerDatos recibe una URL y una función de callback. Una vez que se obtienen los datos, se llama al callback con los datos obtenidos.

Ejemplo de Callbacks

function obtenerDatos(url, callback) {
  fetch(url)
      .then(response => response.json())
      .then(data => callback(data))
      .catch(error => console.error('Error:', error));
}

obtenerDatos('https://api.example.com/data', (data) => {
  console.log('Datos recibidos:', data);
});

Promises

Una promesa es un objeto que representa la eventual finalización (o falla) de una operación asincrónica y su valor resultante. Las promesas pueden estar en uno de tres estados: pendiente, cumplida o rechazada.

Crear y manejar promesas

Las promesas se crean usando el constructor Promise, y se manejan utilizando los métodos .then() y .catch()

const promesa = new Promise((resolve, reject) => {
  const exito = true; // Cambiar a false para simular un error
  if (exito) {
      resolve("Operación exitosa!");
  } else {
      reject("Algo salió mal.");
  }
});

promesa
  .then(resultado => console.log(resultado))  // Maneja el caso de éxito
  .catch(error => console.error(error));      // Maneja el caso de error

Usando Promises con fetch

Las promesas son especialmente útiles con la API fetch, que permite realizar solicitudes HTTP.

fetch('https://api.example.com/data')
  .then(response => {
      if (!response.ok) {
          throw new Error('Error en la red');
      }
      return response.json();
  })
  .then(data => console.log('Datos recibidos:', data))
  .catch(error => console.error('Error:', error));

async y await en JavaScript

Las palabras clave async y await permiten trabajar con promesas de manera más sencilla y legible. La palabra clave async se utiliza para declarar una función que siempre devolverá una promesa. La palabra clave await se usa para esperar el resultado de una promesa.

En este ejemplo, la función obtenerDatosAsync utiliza await para esperar la resolución de la promesa devuelta por fetch. Esto hace que el código sea más fácil de leer y entender.

async function obtenerDatosAsync() {
      let url = 'https://api.example.com/data';

      try {
          const response = await fetch(url);
          if (!response.ok) {
              throw new Error('Error en la red');
          }
          const data = await response.json();
          console.log('Datos recibidos:', data);
      } catch (error) {
          console.error('Error:', error);
      }
  }
  // Llamando a la función
  obtenerDatosAsync();