Classe Promise en JavaScript

Dans cet article, nous expliquons la classe Promise en JavaScript.

YouTube Video

Promise

La classe Promise est une classe pour gérer les opérations asynchrones. Elle gère les résultats si l'opération réussit ou les erreurs si elle échoue. Traditionnellement, les fonctions de rappel étaient utilisées lorsque vous deviez attendre qu'une opération asynchrone se termine, mais Promise rend cela plus clair et plus puissant.

1const promise = new Promise((resolve, reject) => {
2    setTimeout(() => resolve("Done!"), 1000);
3});
4
5// Displays "Done!" after 1 second
6promise.then(result => console.log(result));

• Ce code est un exemple de processus asynchrone qui affiche « Terminé ! » après une seconde.
  • Tout d'abord, un nouvel objet Promise est créé avec new Promise. L’argument est une fonction qui prend deux rappels : resolve pour la réussite et reject pour l’échec.
  • setTimeout est utilisé pour appeler resolve() après une seconde.
  • La méthode then() de l'objet promise attend la fin du traitement et affiche le résultat.

Structure de base

Une Promise est un objet qui aboutit finalement à une réussite ou à un échec.

 1const promise = new Promise((resolve, reject) => {
 2    // Asynchronous operation
 3    // Flag indicating whether the operation was successful
 4    const success = true;
 5
 6    if (success) {
 7        resolve('Operation successful!');
 8    } else {
 9        reject('An error occurred');
10    }
11});

• Dans le cas d’une réussite, resolve() est appelé.
• Dans le cas d’un échec, reject() est appelé.

Un objet Promise a trois états.

1promise
2    .then((result) => {
3        console.log(result);
4    })
5    .catch((error) => {
6        console.error(error);
7    })

• En attente
  • Le processus asynchrone n’est pas encore terminé.
• Accomplie
  • Le processus asynchrone a réussi et le résultat a été retourné par resolve(). Le résultat est reçu en utilisant la méthode then().
• Rejetée
  • Le processus asynchrone a échoué et une erreur est survenue via reject(). L’erreur est reçue en utilisant la méthode catch().

Méthodes then() et catch()

Avec une Promise, vous pouvez définir quoi faire lorsqu'une opération asynchrone se termine. Pour cela, vous utilisez les méthodes then() et catch().

then()

1const promise = new Promise((resolve, reject) => {
2    resolve('Operation successful!');
3});
4
5promise.then((result) => {
6    console.log(result);  // "Operation successful!"
7});

• La méthode then() spécifie une fonction à appeler lorsque la Promise réussit.

catch()

1const promise = new Promise((resolve, reject) => {
2    reject('An error occurred');
3});
4
5promise.catch((error) => {
6    console.error(error);  // "An error occurred"
7});

• La méthode catch() spécifie une fonction à appeler lorsque la Promise échoue.

Méthode finally()

 1const promise = new Promise((resolve, reject) => {
 2    resolve('Operation successful!');
 3});
 4
 5promise
 6    .then((result) => {
 7        console.log(result);
 8    })
 9    .catch((error) => {
10        console.error(error);
11    })
12    .finally(() => {
13        console.log('The operation has completed');
14    });

• La méthode finally() définit du code qui sera exécuté à la fin quel que soit le résultat de la Promise, réussie ou échouée.

Chaînage de then()

then() retourne une nouvelle Promise, vous pouvez donc enchaîner le then() suivant.

 1const promise = new Promise((resolve, reject) => {
 2    setTimeout(() => {
 3        resolve(1);
 4    }, 1000);
 5});
 6
 7promise
 8    .then(result => {
 9        console.log(result); // 1
10        return result + 1;
11    })
12    .then(result => {
13        console.log(result); // 2
14        return result + 1;
15    })
16    .then(result => {
17        console.log(result); // 3
18    })
19    .catch(error => {
20        console.error(error.message); // Something went wrong
21    });

• Dans ce code, le resolve() initial transmet la valeur 1, et chaque valeur retournée par un then est transmise au then suivant.
• En utilisant catch(), vous pouvez gérer toutes les erreurs qui se produisent dans la chaîne à un seul endroit.

Exemple Pratique

Par exemple, les Promises sont souvent utilisées pour récupérer des données depuis un serveur. Voyons un exemple utilisant l'API fetch().

 1fetch('https://codesparklab.com/json/example.json')
 2    .then(response => {
 3        if (!response.ok) {
 4            throw new Error('Network error');
 5        }
 6        return response.json();
 7    })
 8    .then(data => {
 9        console.log(data);
10    })
11    .catch(error => {
12        console.error('Error:', error);
13    });

• Dans ce code, comme fetch() renvoie une Promise, on utilise then() pour traiter les données après avoir reçu une réponse du serveur. Les erreurs sont gérées avec catch().

Gérer Plusieurs Promises

Promise.all()

Pour exécuter plusieurs Promises simultanément et continuer uniquement si toutes réussissent, utilisez Promise.all().

 1const promise1 = Promise.resolve(1);
 2const promise2 = Promise.resolve(2);
 3const promise3 = Promise.resolve(3);
 4
 5Promise.all([promise1, promise2, promise3])
 6    .then((results) => {
 7        console.log(results);  // [1, 2, 3]
 8    })
 9    .catch((error) => {
10        console.error('Error :', error);
11    });

• then() est appelé uniquement si toutes les Promises réussissent. catch() est appelé si ne serait-ce qu'une seule échoue.

Promise.allSettled()

Si vous souhaitez exécuter plusieurs Promise simultanément et obtenir tous les résultats, qu'ils aboutissent ou échouent, utilisez Promise.allSettled().

 1const promise1 = Promise.resolve(1);
 2const promise2 = Promise.reject("Failed");
 3const promise3 = Promise.resolve(3);
 4
 5Promise.allSettled([promise1, promise2, promise3])
 6    .then((results) => {
 7        results.forEach(result => console.log(result));
 8        // [
 9        //   { status: 'fulfilled', value: 1 },
10        //   { status: 'rejected', reason: 'Failed' },
11        //   { status: 'fulfilled', value: 3 }
12        // ]
13    });

• then() est appelé une fois que toutes les Promise sont terminées (soit résolues, soit rejetées). Chaque résultat comprend une propriété status ('fulfilled' ou 'rejected'). Même si certaines échouent, cela n'affecte pas les autres opérations.

Promise.race()

Promise.race() retourne le résultat de la Promise qui se termine en premier, qu’elle soit accomplie ou rejetée.

1const promise1 = new Promise((resolve) => setTimeout(resolve, 100, 'First'));
2const promise2 = new Promise((resolve) => setTimeout(resolve, 500, 'Second'));
3
4Promise.race([promise1, promise2]).then((result) => {
5    console.log(result);  // "First"
6});

• Comme dans cet exemple, le résultat du premier Promise accompli est retourné.

Relation avec async/await

Utiliser la syntaxe async/await permet d'écrire les Promises de manière plus intuitive. Une fonction async renvoie toujours une Promise, et await attend que la Promise soit résolue.

 1async function fetchData() {
 2    try {
 3        const response = await fetch('https://codesparklab.com/json/example.json');
 4        const data = await response.json();
 5        console.log(data);
 6    } catch (error) {
 7        console.error('Error :', error);
 8    }
 9}
10
11fetchData();

En utilisant async/await de cette manière, les opérations asynchrones peuvent être écrites comme du code synchrone, ce qui facilite la lecture.

Résumé

• Promise est un objet pour gérer le succès ou l'échec des opérations asynchrones.
• Gérez les opérations réussies avec then() et les erreurs avec catch().
• finally() définit du code qui s'exécute à la fin, quelle que soit la réussite ou l'échec.
• Vous pouvez gérer plusieurs Promises ensemble en utilisant Promise.all() ou Promise.race().
• async/await est une syntaxe pour écrire les Promises de façon plus simple.

Vous pouvez suivre l'article ci-dessus avec Visual Studio Code sur notre chaîne YouTube. Veuillez également consulter la chaîne YouTube.

YouTube Video