Qu’est-ce qu’une promesse en JavaScript ?

Une promesse (Promise) en JavaScript est un objet représentant le résultat éventuel d’une opération asynchrone. C’est comme une promesse : « Je promets de vous donner le résultat lorsque la tâche sera terminée ». Une promesse peut avoir trois états :

• En attente : L’état initial, ni terminée ni rejetée.
• Tenue (résolue) : L’opération s’est terminée avec succès.
• Rejetée : L’opération a échoué.

Pourquoi utiliser les promesses ?

Avant les promesses, les callbacks étaient utilisés pour gérer l’asynchrone. Cependant, l’imbrication de callbacks menait à « l’enfer des callbacks », rendant le code difficile à lire et à maintenir. Les promesses résolvent ce problème en offrant une syntaxe plus claire et linéaire, facilitant la gestion des tâches asynchrones et le traitement des erreurs.

Comment utiliser les promesses en JavaScript

Créer une promesse

Pour créer une promesse, utilisez new Promise, en passant une fonction exécuteur avec deux paramètres : resolve et reject. resolve est appelée lorsque la promesse est tenue, reject lorsqu’elle est rejetée.

const promesse = new Promise((resolve, reject) => {
  setTimeout(() => {
    const succes = true;
    if (succes) {
      resolve('Succès !');
    } else {
      reject('Échec !');
    }
  }, 1000);
});

Dans cet exemple, après 1 seconde, la promesse sera tenue avec le résultat « Succès ! » ou rejetée avec « Échec ! ».

Gérer le résultat avec .then() et .catch()

Pour récupérer le résultat d’une promesse, utilisez les méthodes .then() et .catch(). .then(onFulfilled) est appelée lorsque la promesse est tenue, .catch(onRejected) lorsqu’elle est rejetée.

promesse
  .then((resultat) => {
    console.log(resultat); // "Succès !"
  })
  .catch((erreur) => {
    console.error(erreur); // "Échec !"
  });

Enchaîner les promesses

Vous pouvez enchaîner les promesses en retournant une promesse dans .then().

premierePromesse()
  .then((resultat1) => {
    return deuxiemePromesse(resultat1);
  })
  .then((resultat2) => {
    console.log(resultat2);
  })
  .catch((erreur) => {
    console.error(erreur);
  });

Utiliser Promise.all

Promise.all permet d’exécuter plusieurs promesses en parallèle et de récupérer les résultats lorsque toutes sont tenues.

const promesse1 = recupererDonnees1();
const promesse2 = recupererDonnees2();

Promise.all([promesse1, promesse2])
  .then(([resultat1, resultat2]) => {
    console.log(resultat1, resultat2);
  })
  .catch((erreur) => {
    console.error(erreur);
  });

Traitez toujours les erreurs avec .catch(). Si vous l’omettez, les erreurs pourraient ne pas être détectées et causer des problèmes difficiles à déboguer.

Comment utiliser les promesses dans React

Dans React, il est courant d’effectuer des tâches asynchrones comme appeler une API pour récupérer des données. L’utilisation des promesses permet de gérer efficacement ces tâches.

Utiliser l’API fetch avec les promesses

fetch est une API intégrée à JavaScript pour récupérer des données, et elle retourne une promesse.

fetch('https://jsonplaceholder.typicode.com/users')
  .then((response) => response.json())
  .then((donnees) => {
    console.log(donnees);
  })
  .catch((erreur) => {
    console.error('Erreur :', erreur);
  });

Dans cet exemple, nous appelons l’API à : https://jsonplaceholder.typicode.com/users pour récupérer la liste des utilisateurs.

Utiliser les promesses et useEffect dans un composant

import React, { useState, useEffect } from 'react';

function ListeUtilisateurs() {
  const [utilisateurs, setUtilisateurs] = useState(null);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then((response) => response.json())
      .then((donnees) => {
        setUtilisateurs(donnees);
      })
      .catch((erreur) => {
        console.error('Erreur :', erreur);
      });
  }, []);

  return (
    <div>
      {utilisateurs ? (
        <ul>
          {utilisateurs.map((utilisateur) => (
            <li key={utilisateur.id}>{utilisateur.name}</li>
          ))}
        </ul>
      ) : (
        <div>Chargement...</div>
      )}
    </div>
  );
}

export default ListeUtilisateurs;

• useEffect avec des dépendances vides [] s’exécutera une seule fois lorsque le composant est monté.
• fetch est utilisé pour appeler l’API et mettre à jour le state utilisateurs lorsque les données sont reçues.

Comparer les promesses et Async/Await

Async/Await est une syntaxe basée sur les promesses, rendant le code plus lisible et semblable à du code synchrone. Il utilise try...catch pour gérer les erreurs et éviter l’imbrication excessive de .then(). Cependant, Async/Await nécessite une bonne compréhension des promesses. Utilisez Async/Await pour un code plus lisible et synchrone en apparence. Utilisez les promesses pour gérer plusieurs tâches asynchrones simultanément et utiliser des méthodes comme Promise.all et Promise.race.