Promesas en JavaScript: tutorial de then, catch y Promise.all

• maPromesse es la variable que contiene el objeto Promise.
• resolve y reject son funciones que aporta el constructor Promise.
• El código que hay dentro de la función define la acción de la promesa.
• Si la acción sale bien, se llama a resolve con un mensaje de éxito (opcional).
• Si la acción falla, se llama a reject con un mensaje de error (opcional).

Interactuar con una promesa

Para tratar el resultado de una promesa se usan los métodos .then() y .catch():

maPromesse
 .then((message) => {
    console.log("Succès:", message);
  })
  .catch((erreur) => {
    console.log("Erreur:", erreur);
  });

• .then() se ejecuta si la promesa se resuelve. El mensaje de éxito llega como argumento.
• .catch() se ejecuta si la promesa se rechaza. El mensaje de error llega como argumento.

Casos de uso

Las promesas sirven para gestionar operaciones asíncronas, como descargar una imagen desde un servidor. En lugar de bloquear el código mientras termina la descarga, la promesa deja seguir ejecutando otras acciones y tratar el resultado en cuanto esté disponible.

Sustituir los callbacks

Las promesas ofrecen una alternativa más legible a los callbacks anidados. Este es un ejemplo de conversión de una función con callbacks en una función con promesa:

function watchTutorialCallback(successCallback, errorCallback, erreur = false) {
  // ... Código de la función ...
  if (erreur) {
    errorCallback("Message d'erreur");
  } else {
    successCallback("Message de succès");
  }
}

function watchTutorialPromise(erreur = false) {
  return new Promise((resolve, reject) => {
    // ... Código de la función ...
    if (erreur) {
      reject("Message d'erreur");
    } else {
      resolve("Message de succès");
    }
  });
}

Usar .then() y .catch() deja el código más claro y evita el « callback hell ».

Métodos avanzados

• Promise.all(): ejecuta varias promesas en paralelo y devuelve un array con los resultados cuando todas se han resuelto.
• Promise.race(): ejecuta varias promesas en paralelo y devuelve el resultado de la primera que se resuelve o se rechaza.

Conclusión

Las promesas son una herramienta potente para gestionar las operaciones asíncronas en JavaScript. Permiten escribir un código más legible y evitan los problemas de los callbacks anidados. Explora los ejemplos del vídeo y practica para dominar este concepto esencial.

Las promesas en JavaScript pueden parecer complicadas al principio, pero en realidad son más sencillas de lo que aparentan. Este tutorial, basado en el vídeo « JavaScript Promises In 10 Minutes » de Web Dev Simplified, te guía por los conceptos clave y la sintaxis de las promesas.

Concepto básico

Una promesa en JavaScript se parece a una promesa de la vida real. Te comprometes a hacer algo, y ese compromiso puede acabar de dos formas:

• Resuelta (resolved): la promesa se cumple.
• Rechazada (rejected): la promesa no se ha podido cumplir.
•  

Sintaxis

Para crear una promesa se usa el constructor Promise:

const succes = true; // sustitúyalo por su propia condición

let maPromesse = new Promise((resolve, reject) => {
  // Código para cumplir la promesa
  if (succes) {
    resolve("Message de succès");
  } else {
    reject("Message d'échec");
  }
});

En este ejemplo:

• maPromesse es la variable que contiene el objeto Promise.
• resolve y reject son funciones que aporta el constructor Promise.
• El código que hay dentro de la función define la acción de la promesa.
• Si la acción sale bien, se llama a resolve con un mensaje de éxito (opcional).
• Si la acción falla, se llama a reject con un mensaje de error (opcional).

Interactuar con una promesa

Para tratar el resultado de una promesa se usan los métodos .then() y .catch():

maPromesse
 .then((message) => {
    console.log("Succès:", message);
  })
  .catch((erreur) => {
    console.log("Erreur:", erreur);
  });

• .then() se ejecuta si la promesa se resuelve. El mensaje de éxito llega como argumento.
• .catch() se ejecuta si la promesa se rechaza. El mensaje de error llega como argumento.

Casos de uso

Las promesas sirven para gestionar operaciones asíncronas, como descargar una imagen desde un servidor. En lugar de bloquear el código mientras termina la descarga, la promesa deja seguir ejecutando otras acciones y tratar el resultado en cuanto esté disponible.

Sustituir los callbacks

Las promesas ofrecen una alternativa más legible a los callbacks anidados. Este es un ejemplo de conversión de una función con callbacks en una función con promesa:

function watchTutorialCallback(successCallback, errorCallback, erreur = false) {
  // ... Código de la función ...
  if (erreur) {
    errorCallback("Message d'erreur");
  } else {
    successCallback("Message de succès");
  }
}

function watchTutorialPromise(erreur = false) {
  return new Promise((resolve, reject) => {
    // ... Código de la función ...
    if (erreur) {
      reject("Message d'erreur");
    } else {
      resolve("Message de succès");
    }
  });
}

Usar .then() y .catch() deja el código más claro y evita el « callback hell ».

Métodos avanzados

• Promise.all(): ejecuta varias promesas en paralelo y devuelve un array con los resultados cuando todas se han resuelto.
• Promise.race(): ejecuta varias promesas en paralelo y devuelve el resultado de la primera que se resuelve o se rechaza.

Conclusión

Las promesas son una herramienta potente para gestionar las operaciones asíncronas en JavaScript. Permiten escribir un código más legible y evitan los problemas de los callbacks anidados. Explora los ejemplos del vídeo y practica para dominar este concepto esencial.