Tutoriel JavaScript: Promise

• maPromesse est la variable contenant l’objet Promise.
• resolve et reject sont des fonctions fournies par le constructeur Promise.
• Le code à l’intérieur de la fonction définit l’action de la promesse.
• Si l’action réussit, on appelle resolve avec un message de succès (optionnel).
• Si l’action échoue, on appelle reject avec un message d’erreur (optionnel).

Interactions avec une Promesse

On utilise les méthodes .then() et .catch() pour gérer le résultat d’une promesse :

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

• .then() s’exécute si la promesse est résolue. Le message de succès est passé en argument.
• .catch() s’exécute si la promesse est rejetée. Le message d’erreur est passé en argument.

Cas d’Utilisation

Les promesses sont utiles pour gérer des opérations asynchrones, comme le téléchargement d’une image depuis un serveur. Au lieu de bloquer le code en attendant la fin du téléchargement, la promesse permet d’exécuter d’autres actions et de gérer le résultat du téléchargement une fois qu’il est disponible.

Remplacer les Callbacks

Les promesses offrent une alternative plus lisible aux callbacks imbriqués. Voici un exemple de conversion d’une fonction utilisant des callbacks en une fonction utilisant une promesse :

function watchTutorialCallback(successCallback, errorCallback, erreur = false) {
  // ... Code de la fonction ...
  if (erreur) {
    errorCallback("Message d'erreur");
  } else {
    successCallback("Message de succès");
  }
}

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

L’utilisation de .then() et .catch() rend le code plus clair et évite le « callback hell ».

Méthodes Avancées

• Promise.all(): Exécute plusieurs promesses en parallèle et retourne un tableau des résultats une fois que toutes les promesses sont résolues.
• Promise.race(): Exécute plusieurs promesses en parallèle et retourne le résultat de la première promesse résolue ou rejetée.

Conclusion

Les promesses sont un outil puissant pour gérer les opérations asynchrones en JavaScript. Elles permettent d’écrire un code plus lisible et d’éviter les problèmes liés aux callbacks imbriqués. N’hésitez pas à explorer les exemples de la vidéo et à pratiquer pour maîtriser ce concept essentiel.

Les promesses en JavaScript peuvent sembler complexes au premier abord, mais elles sont en réalité plus simples qu’il n’y paraît. Ce tutoriel, basé sur la vidéo « JavaScript Promises In 10 Minutes » de Web Dev Simplified, vous guidera à travers les concepts clés et la syntaxe des promesses.

Concept de Base

Une promesse en JavaScript est similaire à une promesse dans la vie réelle. Vous vous engagez à faire quelque chose, et cette promesse peut avoir deux résultats :

• Résolue (Resolved): La promesse est tenue avec succès.
• Rejetée (Rejected): La promesse n’a pas pu être tenue.
•  

Syntaxe

Pour créer une promesse, on utilise le constructeur Promise:

const succes = true; // remplacez par votre propre condition

let maPromesse = new Promise((resolve, reject) => {
  // Code pour accomplir la promesse
  if (succes) {
    resolve("Message de succès");
  } else {
    reject("Message d'échec");
  }
});

Dans cet exemple :

• maPromesse est la variable contenant l’objet Promise.
• resolve et reject sont des fonctions fournies par le constructeur Promise.
• Le code à l’intérieur de la fonction définit l’action de la promesse.
• Si l’action réussit, on appelle resolve avec un message de succès (optionnel).
• Si l’action échoue, on appelle reject avec un message d’erreur (optionnel).

Interactions avec une Promesse

On utilise les méthodes .then() et .catch() pour gérer le résultat d’une promesse :

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

• .then() s’exécute si la promesse est résolue. Le message de succès est passé en argument.
• .catch() s’exécute si la promesse est rejetée. Le message d’erreur est passé en argument.

Cas d’Utilisation

Les promesses sont utiles pour gérer des opérations asynchrones, comme le téléchargement d’une image depuis un serveur. Au lieu de bloquer le code en attendant la fin du téléchargement, la promesse permet d’exécuter d’autres actions et de gérer le résultat du téléchargement une fois qu’il est disponible.

Remplacer les Callbacks

Les promesses offrent une alternative plus lisible aux callbacks imbriqués. Voici un exemple de conversion d’une fonction utilisant des callbacks en une fonction utilisant une promesse :

function watchTutorialCallback(successCallback, errorCallback, erreur = false) {
  // ... Code de la fonction ...
  if (erreur) {
    errorCallback("Message d'erreur");
  } else {
    successCallback("Message de succès");
  }
}

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

L’utilisation de .then() et .catch() rend le code plus clair et évite le « callback hell ».

Méthodes Avancées

• Promise.all(): Exécute plusieurs promesses en parallèle et retourne un tableau des résultats une fois que toutes les promesses sont résolues.
• Promise.race(): Exécute plusieurs promesses en parallèle et retourne le résultat de la première promesse résolue ou rejetée.

Conclusion

Les promesses sont un outil puissant pour gérer les opérations asynchrones en JavaScript. Elles permettent d’écrire un code plus lisible et d’éviter les problèmes liés aux callbacks imbriqués. N’hésitez pas à explorer les exemples de la vidéo et à pratiquer pour maîtriser ce concept essentiel.