Articles
Introduction à TypeScript
Classe Promise en TypeScript

Classe Promise en TypeScript

Cet article explique la classe Promise en TypeScript.

YouTube Video

Promise

La classe Promise en TypeScript est fondamentalement la même que Promise en JavaScript. Une Promise est une classe intégrée pour gérer les opérations asynchrones, représentant le résultat d'une opération asynchrone lorsqu'elle est terminée. Ici, nous expliquons l'utilisation de base des Promises et les concepts associés.

Utilisation de base

Créer une Promise :

Un objet Promise est utilisé pour encapsuler des opérations asynchrones. Une Promise est créée avec new Promise(executor), et elle exécute des opérations asynchrones à l'intérieur. L’executor prend deux fonctions, resolve et reject, comme arguments.

1const myPromise = new Promise<number>((resolve, reject) => {
2    // Perform asynchronous operations
3    const success = true; // This is just an example
4    if (success) {
5        resolve(42); // In case of success
6    } else {
7        reject('Failed'); // In case of failure
8    }
9});

Utiliser une Promise :

La Promise créée est traitée à l'aide de then() et catch().

1myPromise.then((value) => {
2    console.log(`Success: ${value}`); // Process the value passed with resolve
3}).catch((error) => {
4    console.error(`Error: ${error}`); // Handle the error passed with reject
5});

Méthode finally() 

 1const myPromise = new Promise<number>((resolve, reject) => {
 2    // Perform asynchronous operations
 3    const success = false; // This is just an example
 4    if (success) {
 5        resolve(42); // In case of success
 6    } else {
 7        reject('Failed'); // In case of failure
 8    }
 9});
10
11myPromise.then((value) => {
12    console.log(`Success: ${value}`); // Process the value passed with resolve
13}).catch((error) => {
14    console.error(`Error: ${error}`); // Handle the error passed with reject
15}).finally(() => {
16    console.log('The operation has completed');
17});
  • La méthode finally() définit un code qui sera toujours exécuté, que la Promise soit résolue ou rejetée.

Chaîner les Promises :

En chaînant then() après then(), vous pouvez connecter plusieurs opérations asynchrones en série.

 1const myPromise = new Promise<number>((resolve, reject) => {
 2    // Perform asynchronous operations
 3    const success = true; // This is just an example
 4    if (success) {
 5        resolve(42); // In case of success
 6    } else {
 7        reject('Failed'); // In case of failure
 8    }
 9});
10
11myPromise
12    .then((value) => {
13        console.log(`Success: ${value}`);
14        return value + 1; // Pass the value to the next then
15    })
16    .then((newValue) => {
17        console.log(`New value: ${newValue}`);
18    })
19    .catch((error) => {
20        console.error(`Error: ${error}`);
21    });

async/await:

En TypeScript, vous pouvez gérer les Promises plus simplement en utilisant async/await. Dans une fonction async, vous pouvez utiliser le mot-clé await pour attendre le résultat d'une Promise.

 1const myPromise = new Promise<number>((resolve, reject) => {
 2    // Perform asynchronous operations
 3    const success = true; // This is just an example
 4    if (success) {
 5        resolve(42); // In case of success
 6    } else {
 7        reject('Failed'); // In case of failure
 8    }
 9});
10
11async function asyncFunction() {
12    try {
13        const value = await myPromise;
14        console.log(`Success: ${value}`);
15    } catch (error) {
16        console.error(`Error: ${error}`);
17    }
18}
19
20asyncFunction();

Méthodes des Promises

Promise.all()

Promise.all exécute plusieurs Promises simultanément et attend que toutes soient résolues.

 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 lorsque toutes les Promises sont résolues. catch() est appelé si ne serait-ce qu'une seule échoue.

Promise.race()

Promise.race renvoie le résultat de la première Promise qui se termine parmi plusieurs Promises.

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 de la première Promise qui se termine est renvoyé.

Promise.allSettled()

Promise.allSettled attend que toutes les Promises soient terminées et renvoie un tableau de tous les résultats, qu'ils soient résolus ou rejetés.

 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 Promises sont terminées (qu'elles soient résolues ou rejetées). Chaque résultat inclut une propriété status ('fulfilled' ou 'rejected'). Les échecs n’affectent pas les autres opérations.

Promise.any()

Promise.any attend que la première Promise soit résolue et la renvoie.

 1const promise1 = new Promise((resolve) => setTimeout(() => resolve("A ok"), 300));
 2const promise2 = new Promise((_, reject) => setTimeout(() => reject("B fail"), 100));
 3const promise3 = new Promise((resolve) => setTimeout(() => resolve("C ok"), 200));
 4
 5Promise.any([promise1, promise2, promise3])
 6    .then(value => {
 7        // Logs the first fulfilled value ("C ok")
 8        console.log("first fulfilled:", value);
 9    })
10    .catch(err => {
11        console.log("should not reach here in this example:", err);
12    });
  • Il renvoie la première valeur résolue parmi plusieurs Promises.

Résumé

En utilisant TypeScript, vous pouvez spécifier les types des Promises de manière appropriée, ce qui vous permet d'écrire des programmes plus sûrs au niveau des types. Cela aide à détecter les erreurs plus tôt pendant le développement en spécifiant à l'avance le type de valeur qu'une Promise retourne.

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

Gestion des erreurs dans TypeScript