Promesas y async/await en JavaScript: explicación sencilla

promesas y async/await en: Qué vas a conseguir

promesas y async/await en:

En este artículo, vas a aprender a manejar promesas y async/await en JavaScript explicados fácil. Esto te permitirá gestionar operaciones asíncronas de manera más eficiente y legible. Al final, deberías ser capaz de crear tus propias promesas, utilizarlas con async/await y manejar errores adecuadamente.

Antes de empezar / requisitos

Para seguir este tutorial, necesitas tener conocimientos básicos de JavaScript, así como un entorno de desarrollo donde puedas escribir y ejecutar código. Puedes usar cualquier editor de texto como Visual Studio Code, Sublime Text o incluso un simple bloc de notas. También asegúrate de tener un navegador moderno para probar tu código.

Qué son las promesas en JavaScript

Las promesas son objetos que representan la finalización o el fracaso de una operación asíncrona. Una promesa puede estar en uno de estos tres estados:

Pendiente: El estado inicial, ni completada ni rechazada.
Cumplida: La operación se completó con éxito.
Rechazada: La operación falló.

Las promesas son útiles para manejar tareas que tardan un tiempo en completarse, como las peticiones a un servidor usando fetch.

Cómo funcionan las promesas

Las promesas se crean usando el constructor Promise. Este constructor toma una función como argumento, que a su vez recibe dos funciones: resolve y reject. Cuando la operación asíncrona se completa, se llama a resolve si tiene éxito o a reject si falla.

const miPromesa = new Promise((resolve, reject) => {
  // Simulamos una operación asíncrona
  setTimeout(() => {
    const exito = true; // Cambia a false para simular un error
    if (exito) {
      resolve('Operación completada con éxito.');
    } else {
      reject('Hubo un error en la operación.');
    }
  }, 2000);
});

miPromesa
  .then(result => console.log(result))
  .catch(error => console.error(error));

En este ejemplo, creamos una promesa que simula una operación que tarda 2 segundos. Si exito es verdadero, se resuelve; de lo contrario, se rechaza. Debes ver el mensaje en la consola dependiendo del resultado.

Introducción a async/await

El uso de async/await simplifica la escritura de código asíncrono. La palabra clave async se utiliza para declarar una función asíncrona, mientras que await se utiliza para esperar a que una promesa se resuelva antes de continuar con la ejecución del código.

Ejemplo de async/await

const miFuncionAsync = async () => {
  try {
    const resultado = await miPromesa;
    console.log(resultado);
  } catch (error) {
    console.error(error);
  }
};

miFuncionAsync();

En este ejemplo, miFuncionAsync es una función asíncrona que espera a que miPromesa se resuelva. Si se resuelve con éxito, se imprime el resultado; si ocurre un error, se captura y se imprime.

Paso a paso: Creando una promesa

1. Crear una promesa

Para crear una promesa, usa el constructor Promise y define lo que quieres que haga. Por ejemplo, puedes hacer una petición a un servidor.

const obtenerDatos = () => {
  return new Promise((resolve, reject) => {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then(response => {
        if (!response.ok) {
          throw new Error('Error en la red');
        }
        return response.json();
      })
      .then(data => resolve(data))
      .catch(error => reject(error));
  });
};

Esta función obtenerDatos hace una petición a un API y devuelve una promesa que se resuelve con los datos recibidos o se rechaza si hay un error.

2. Usar la promesa

Ahora, puedes usar esta promesa para obtener los datos y manejarlos.

obtenerDatos()
  .then(data => console.log(data))
  .catch(error => console.error(error));

Al ejecutar este código, verás los datos en la consola o un mensaje de error si algo falla.

Paso a paso: Usando async/await

1. Convertir la función a async

Para usar await, convierte la función que llama a obtenerDatos en una función asíncrona.

const ejecutar = async () => {
  try {
    const datos = await obtenerDatos();
    console.log(datos);
  } catch (error) {
    console.error(error);
  }
};

 ejecutar();

Ahora, al ejecutar ejecutar, se espera a que obtenerDatos se resuelva antes de continuar.

Si algo falla: Manejo de errores

El manejo de errores es crucial al trabajar con promesas y async/await. Usa catch para promesas y bloques try/catch para funciones asíncronas. Esto te permitirá capturar y manejar errores de manera efectiva.

Errores comunes al trabajar con promesas

No manejar errores: Siempre asegúrate de capturar errores para evitar que tu aplicación falle silenciosamente.
Olvidar el return: Si no devuelves la promesa en una función asíncrona, puede que no funcione como esperas.
Usar await fuera de una función async: Recuerda que await solo puede usarse dentro de funciones declaradas con async.

Preguntas frecuentes sobre promesas y async/await

¿Qué son las promesas? Son objetos que representan el resultado de una operación asíncrona, que puede ser completada (resuelta) o fallida (rechazada).
¿Cómo se usan async/await? Se utilizan para escribir código asíncrono de manera más sencilla y legible, evitando el uso excesivo de then y catch.
¿Puedo usar promesas sin async/await? Sí, puedes usar promesas con los métodos then y catch para manejar el resultado y los errores.

Cierre práctico: Mejores prácticas y consejos

Al trabajar con promesas y async/await, aquí van algunos consejos:

Siempre maneja los errores.
Usa async/await para un código más limpio y fácil de entender.
Evita el anidamiento profundo de promesas para mantener la legibilidad.

¡Y eso es todo! Ahora tienes una buena base sobre promesas y async/await en JavaScript. Practica creando tus propias funciones asíncronas y experimenta con ellas.

Relacionado: Todo sobre los nuevos ROG Xbox Ally y Ally X: precios, fecha de lanzamiento y specs filtradas.

Relacionado: ¿Por qué los portátiles se descargan tan rápido en invierno?.

Promesas y async/await en JavaScript explicados fácil