Guías Técnicas

Manejo de Promesas y Async/Await en TypeScript: Guía Completa

Creación de Promesas

Las promesas son un mecanismo en JavaScript (y, por ende, en TypeScript) que permite manejar operaciones asincrónicas de manera más clara y estructurada. Una promesa representa un valor que puede estar disponible ahora, en el futuro o nunca.

Ejemplo de Creación de Promesas

typescript 
// Función que devuelve una promesa
function obtenerDatos(): Promise<string> {
  return new Promise((resolve, reject) => {
      // Simulando una operación asincrónica
      setTimeout(() => {
          const exito = true; // Cambia a false para simular un error
          if (exito) {
              resolve("Datos obtenidos con éxito");
          } else {
              reject("Error al obtener los datos");
          }
      }, 2000);
  });
}

// Uso de la promesa
obtenerDatos()
  .then((resultado) => console.log(resultado))
  .catch((error) => console.error(error));

Uso de Async/Await para Manejar Operaciones Asincrónicas

La sintaxis async/await permite trabajar con promesas de una manera más sencilla y legible. La palabra clave async se utiliza para declarar una función asincrónica, mientras que await se utiliza para esperar el resultado de una promesa dentro de esa función.

Ejemplo de Uso de Async/Await

typescript 
// Función asincrónica que utiliza await
async function manejarDatos() {
  try {
      const resultado = await obtenerDatos();
      console.log(resultado);
  } catch (error) {
      console.error(error);
  }
}

// Llamada a la función asincrónica
manejarDatos();
  Explicación del Código

Creación de Promesas:

  • En el ejemplo obtenerDatos, se crea una nueva promesa que simula una operación asincrónica. Después de 2 segundos, se resuelve o se rechaza según el valor de exito.
  • Se utiliza then para manejar el resultado exitoso y catch para manejar el error.

Uso de Async/Await:

  • La función manejarDatos está marcada como async, lo que permite utilizar await para esperar a que obtenerDatos se resuelva.
  • Se usa try/catch para manejar cualquier error que pueda ocurrir durante la operación asincrónica.

Consultando la API de JSONPlaceholder

JSONPlaceholder es una API falsa que se puede utilizar para realizar pruebas y prototipos. A continuación, se muestra un ejemplo de cómo usar async/await en TypeScript para realizar una consulta a esta API y obtener una lista de publicaciones.

Ejemplo de Consulta a la API

typescript 
// Función asincrónica para obtener publicaciones
async function obtenerPublicaciones() {
  try {
      const respuesta = await fetch("https://jsonplaceholder.typicode.com/posts");
      
      // Verificar si la respuesta es exitosa
      if (!respuesta.ok) {
          throw new Error(`Error en la red: ${respuesta.status}`);
      }

      // Convertir la respuesta a formato JSON
      const publicaciones = await respuesta.json();
      
      // Mostrar las publicaciones en la consola
      console.log(publicaciones);
  } catch (error) {
      console.error("Error al obtener las publicaciones:", error);
  }
}

// Llamada a la función asincrónica
obtenerPublicaciones();
  Explicación del Código

  • Función Asincrónica: La función obtenerPublicaciones está declarada como async, lo que permite el uso de await dentro de ella.

    Consulta a la API:

  • Se utiliza el método fetch de JavaScript para realizar una solicitud GET a la API de JSONPlaceholder. Además de usar await para esperar a que se complete la solicitud.
  • Se verifica si la respuesta es exitosa (respuesta.ok), y si no lo es, se lanza un error.

    Procesamiento de la Respuesta:

  • Si la respuesta es exitosa, se convierte a formato JSON usando await respuesta.json().
  • Finalmente, se imprimen las publicaciones en la consola.

    Manejo de Errores:

  • Se utiliza try/catch para manejar cualquier error que pueda ocurrir durante la consulta o el procesamiento de la respuesta.