Async/await en JavaScript

Dans cet article, nous allons expliquer async/await en JavaScript.

YouTube Video

Async/await en JavaScript

async (et await) en JavaScript sont des fonctionnalités conçues pour rendre l'écriture des opérations asynchrones plus intuitive et lisible. En utilisant ceci, vous pouvez réduire la complexité des fonctions de rappel traditionnelles et des chaînes de Promise, et écrire du code asynchrone d'une manière qui ressemble à du code synchrone.

Fonction async

async est utilisé pour définir une fonction comme étant asynchrone. Une fonction async retourne toujours une Promesse. Dans une fonction marquée par async, vous pouvez utiliser await pour attendre le résultat d'une Promesse à retourner.

Syntaxe de base d'une fonction async

1async function myAsyncFunction() {
2    // Write asynchronous processing here
3    return 'Result';  // Return a Promise
4}

Dans ce cas, appeler myAsyncFunction() retourne automatiquement un objet Promesse. Lorsque la Promesse est résolue, son résultat devient la valeur retournée par return.

Exemple : Fonction async de base

1async function greet() {
2    return 'Hello, World!';
3}
4
5greet().then((message) => {
6    console.log(message);  // Displays "Hello, World!"
7});

await

await est utilisé pour attendre qu'une Promesse soit résolue. En utilisant await, vous pouvez suspendre l'exécution jusqu'à ce que la Promesse soit résolue et récupérer le résultat de cette Promesse. await peut uniquement être utilisé à l'intérieur d'une fonction async.

Exemple : Comment utiliser await

 1async function fetchData() {
 2    // Wait for the result of the Promise
 3    const data = await fetch('https://codesparklab.com/json/example.json');
 4    // Wait for the asynchronous operation to complete
 5    const jsonData = await data.json();
 6    // Retrieve and display the data
 7    console.log(jsonData);
 8}
 9
10fetchData();

Dans l'exemple ci-dessus, il attend la Promesse retournée par la fonction fetch avec await, puis exécute d'autres opérations asynchrones en utilisant le résultat.

Gestion des erreurs avec async/await

Si une erreur se produit à l'intérieur d'une fonction async, cette erreur est traitée comme un rejet de la Promesse. Vous pouvez utiliser des instructions try...catch pour gérer les erreurs.

Exemple : Gestion des erreurs

 1async function fetchData() {
 2    try {
 3        // Invalid URL
 4        const data = await fetch('https://api.invalid-url.com/data');
 5        const jsonData = await data.json();
 6        console.log(jsonData);
 7    } catch (error) {
 8        // Catch the error
 9        console.error('Failed to fetch data:', error);
10    }
11}
12
13fetchData();

Utiliser un bloc try...catch vous permet d'intercepter les erreurs survenant lors des opérations asynchrones, évitant ainsi que le programme ne plante en cas d'erreurs.

Avantages de async/await

Comparé aux chaînes de Promise traditionnelles, async/await offre les avantages suivants :.

• Lisibilité améliorée
  • Le traitement asynchrone peut être écrit comme du code synchrone, évitant ainsi la complexité des chaînes de Promise et des fonctions de rappel fortement imbriquées.
• Débogage facilité
  • Puisqu'il ressemble à du code synchrone, le débogage et la gestion des erreurs deviennent plus simples.
• Meilleure maintenabilité
  • Les processus asynchrones peuvent être écrits de manière plus simple, ce qui facilite les modifications du code et améliore la maintenabilité à long terme.

Exemple : chaîne de Promise vs async/await

Comparons du code utilisant des chaînes de Promise et du code utilisant async/await.

 1// Code using Promise chains
 2function fetchDataPromise() {
 3    fetch('https://codesparklab.com/json/example.json')
 4        .then((response) => response.json())
 5        .then((data) => {
 6            console.log(data);
 7        })
 8    .catch((error) => {
 9        console.error('Failed to fetch data:', error);
10    });
11}
12
13// Code using async/await
14async function fetchDataAsync() {
15    try {
16        const response = await fetch('https://codesparklab.com/json/example.json');
17        const data = await response.json();
18        console.log(data);
19    } catch (error) {
20        console.error('Failed to fetch data:', error);
21    }
22}

Comme vous pouvez le voir, utiliser async/await vous permet d'écrire des processus asynchrones de manière linéaire, ce qui rend le code plus lisible.

Exécutez plusieurs opérations asynchrones simultanément

En combinant Promise.all() ou Promise.race() avec await, vous pouvez exécuter plusieurs opérations asynchrones simultanément et gérer leurs résultats collectivement.

Exemple : Exécuter plusieurs opérations asynchrones simultanément

 1async function fetchMultipleData() {
 2    try {
 3        const [data1, data2] = await Promise.all([
 4            fetch('https://codesparklab.com/json/example1.json'),
 5            fetch('https://codesparklab.com/json/example2.json')
 6        ]);
 7        const jsonData1 = await data1.json();
 8        const jsonData2 = await data2.json();
 9        console.log(jsonData1, jsonData2);
10    } catch (error) {
11        console.error('Failed to fetch data:', error);
12    }
13}
14
15fetchMultipleData();

Promise.all() résout plusieurs Promesses simultanément et retourne leurs résultats sous forme de tableau. Il attend que toutes les Promesses soient résolues, et si l'une d'elles échoue, cela est considéré comme un échec global.

Résumé

• Fonction async : Retourne toujours une Promesse et est utilisée pour écrire des traitements asynchrones.
• await : Utilisé pour attendre qu'une Promesse soit résolue et récupérer son résultat.
• Gestion des erreurs : Utilisez try...catch pour gérer les erreurs qui surviennent lors du traitement asynchrone.
• Opérations asynchrones multiples : Vous pouvez exécuter plusieurs opérations asynchrones simultanément en utilisant Promise.all().

async/await sont des outils puissants pour gérer le traitement asynchrone, alors n'hésitez pas à les utiliser pour simplifier une logique asynchrone complexe.

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