React JS | Clase 05 – Promesas y Método .map() 👨🏽‍💻

En esta clase vamos a aprender sobre promesas y el método .map() en React JS. Las promesas son objetos que representan la eventual terminación o falla de una operación asincrónica, y son una parte fundamental del manejo de operaciones asíncronas en JavaScript.

El método .map() en JavaScript se utiliza para iterar sobre cada elemento de un array y devolver un nuevo array con los valores que resultan de aplicar una función a cada elemento del array. Es una forma eficiente y concisa de transformar y manipular arrays en JavaScript.

Vamos a comenzar por entender el concepto de promesas en JavaScript. Una promesa puede estar en uno de tres estados: pendiente, cumplida o rechazada. Cuando una promesa se resuelve exitosamente, se llama "resuelta" y si ocurre un error durante la resolución de la promesa, esta se llama "rechazada".

Para crear una promesa en JavaScript, utilizamos la clase Promise. Por ejemplo:

const miPromesa = new Promise((resolve, reject) => {
  // Realizamos alguna operación asincrónica, como una llamada a una API
  const exito = true;

  if(exito) {
    resolve("Operación exitosa");
  } else {
    reject("Ocurrió un error");
  }
});

miPromesa.then((respuesta) => {
  console.log(respuesta);
}).catch((error) => {
  console.error(error);
});

En el ejemplo anterior, creamos una promesa que resuelve si la operación es exitosa, y rechaza si ocurre un error. Luego manejamos la promesa con los métodos .then() y .catch() para manejar la respuesta exitosa y los errores respectivamente.

Ahora, vamos a ver cómo podemos utilizar promesas y el método .map() en React JS. Supongamos que tenemos un array de números y queremos realizar una operación asincrónica sobre cada uno de ellos. Podemos hacer lo siguiente:

const numeros = [1, 2, 3, 4, 5];
const operacionAsincronica = (numero) => {
  return new Promise((resolve, reject) => {
    // Operación asincrónica
    setTimeout(() => {
      resolve(numero * 2);
    }, 1000);
  });
};

const promesas = numeros.map((numero) => {
  return operacionAsincronica(numero);
});

Promise.all(promesas)
  .then((resultados) => {
    console.log(resultados); // [2, 4, 6, 8, 10]
  })
  .catch((error) => {
    console.error(error);
});

En este ejemplo, creamos un array de números y una función que realiza una operación asincrónica sobre cada número. Utilizamos el método .map() para crear un array de promesas, donde cada promesa representa el resultado de la operación asincrónica sobre cada número. Luego usamos Promise.all() para esperar a que todas las promesas se resuelvan o alguna sea rechazada.

Finalmente, manejamos las respuestas exitosas o los errores con los métodos .then() y .catch() respectivamente.

Espero que esta explicación te haya ayudado a comprender cómo trabajar con promesas y el método .map() en React JS. ¡Sigue practicando y experimentando con estos conceptos para mejorar tus habilidades en el desarrollo de aplicaciones con React JS! 👨🏽‍💻