Async/await en TypeScript

Cet article explique async/await en TypeScript.

YouTube Video

Async/await en TypeScript

En TypeScript, async est un mot-clé permettant de décrire de manière concise les opérations asynchrones et se comporte de manière similaire à la syntaxe async/await de JavaScript. Les fonctions async sont conçues pour rendre la gestion des fonctions retournant des Promises plus intuitive.

Notions de base des fonctions async

Les fonctions déclarées avec le mot-clé async retournent toujours une Promise. Voici un exemple de base :.

1async function fetchData(): Promise<string> {
2    return "Data received";
3}
4
5fetchData().then((data) => console.log(data)); // "Data received"

Dans cet exemple, comme la fonction async retourne toujours une Promise, la valeur retournée est automatiquement résolue avec Promise.resolve. Autrement dit, "Data received" devient un Promise<string> et est traité comme une opération asynchrone.

Le mot-clé await

Le mot-clé await ne peut être utilisé qu'à l'intérieur d'une fonction async. Cela permet de faire une pause et d'attendre le résultat d'une Promise avant de poursuivre l'exécution de la fonction.

Dans l'exemple suivant, le traitement asynchrone utilisant fetch est écrit avec async/await.

 1async function getUserData() {
 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 fetching user data:", error);
 8    }
 9}
10
11getUserData();

Dans cet exemple, await est utilisé pour attendre la complétion de la Promise retournée par la fonction fetch, et son résultat est assigné à la variable response. De plus, le résultat de response.json() est également attendu.

Gestion des erreurs avec async/await

Les erreurs survenant lors du traitement asynchrone peuvent être capturées en utilisant la syntaxe standard try...catch. Si une erreur se produit dans la partie await, cette erreur est gérée dans le bloc catch.

 1async function fetchDataWithErrorHandling() {
 2    try {
 3        const response = await fetch('https://invalid.codesparklab.com/');
 4        if (!response.ok) {
 5            throw new Error(`HTTP error! status: ${response.status}`);
 6        }
 7        const data = await response.json();
 8        console.log(data);
 9    } catch (error) {
10        console.error("Fetch error:", error);
11    }
12}
13
14fetchDataWithErrorHandling();

Dans l'exemple ci-dessus, le résultat de la fonction fetch est attendu avec await, et si une erreur se produit, elle est gérée avec try...catch.

Avantages de async/await

1. Traitement asynchrone intuitif : En utilisant async/await, le flux du code est plus intuitif qu'en utilisant les chaînes de Promise (then ou catch), permettant de l'écrire comme un traitement synchrone.

2. Gestion des erreurs simplifiée : Utiliser try...catch simplifie la gestion des erreurs dans les opérations asynchrones. Vous pouvez écrire un code plus lisible qu'en utilisant les chaînes de Promise.

Valeurs de retour des fonctions async

Une fonction async retourne toujours une Promise. Ainsi, même sans retourner explicitement une Promise, le traitement asynchrone est possible en utilisant le mot-clé async.

1async function example() {
2    return 42;
3}
4
5example().then((result) => console.log(result)); // 42

Dans le code ci-dessus, une valeur synchronisée 42 est retournée, mais comme elle se trouve dans une fonction async, elle est automatiquement convertie en Promise.resolve(42).

Exécution séquentielle des fonctions asynchrones

Lors de l'exécution de plusieurs fonctions asynchrones successives, vous pouvez utiliser await pour contrôler leur ordre.

 1async function fetchData(url: string): Promise<any> {
 2    try {
 3        const response = await fetch(url);
 4        return await response.json();
 5    } catch (error) {
 6        console.error("Error fetching user data:", error);
 7    }
 8}
 9
10async function fetchData1(): Promise<any> {
11    return await fetchData("https://codesparklab.com/json/example.json");
12}
13
14async function fetchData2(): Promise<any> {
15    return await fetchData("https://codesparklab.com/json/example2.json");
16}
17
18async function processData() {
19    const data1 = await fetchData1();
20    console.log(data1);
21
22    const data2 = await fetchData2();
23    console.log(data2);
24}
25
26processData();

Dans cet exemple, fetchData2 est exécuté après avoir attendu que fetchData1 se termine. Cela est plus lisible comparé à l'utilisation d'une chaîne de Promise.

Exécution en parallèle

Si vous souhaitez exécuter des opérations asynchrones en parallèle, vous pouvez utiliser Promise.all pour gérer plusieurs Promises simultanément.

 1async function fetchData(url: string): Promise<any> {
 2    try {
 3        const response = await fetch(url);
 4        return await response.json();
 5    } catch (error) {
 6        console.error("Error fetching user data:", error);
 7    }
 8}
 9
10async function fetchData1(): Promise<any> {
11    return await fetchData("https://codesparklab.com/json/example.json");
12}
13
14async function fetchData2(): Promise<any> {
15    return await fetchData("https://codesparklab.com/json/example2.json");
16}
17
18async function fetchMultipleData() {
19    const [data1, data2] = await Promise.all([fetchData1(), fetchData2()]);
20    console.log(data1);
21    console.log(data2);
22}
23
24fetchMultipleData();

Dans ce cas, fetchData1 et fetchData2 sont exécutés en même temps et le processus continue une fois que les deux sont résolus. Cela permet une gestion efficace de plusieurs opérations asynchrones.

Résumé

• Une fonction async retourne une Promise, et en utilisant le mot-clé await, vous pouvez attendre le résultat d'une opération asynchrone.
• En utilisant try...catch, la gestion des erreurs dans les opérations asynchrones devient plus simple.
• En utilisant Promise.all, il est possible d'exécuter plusieurs opérations asynchrones en parallèle.

async/await est largement utilisé dans TypeScript et JavaScript car il permet une description plus simple des opérations asynchrones.

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