Utilisation de async/await

Utilisation de async/await en JavaScript

L'async/await est une syntaxe introduite dans ECMAScript 2017 pour simplifier la gestion des promesses et rendre le code asynchrone plus lisible et plus semblable à un code synchrone.

1. Déclaration de Fonctions Asynchrones :

Les fonctions asynchrones sont déclarées en utilisant le mot-clé async. Cela permet à la fonction de retourner une promesse. À l'intérieur de la fonction asynchrone, vous pouvez utiliser le mot-clé await pour suspendre l'exécution de la fonction jusqu'à ce qu'une promesse soit résolue ou rejetée.

Exemple de Déclaration d'une Fonction Asynchrone :

async function maFonctionAsynchrone() {
    // Opération asynchrone (exemple avec setTimeout)
    let resultat = await new Promise(resolve => {
        setTimeout(() => resolve('Données asynchrones'), 1000);
    });
    
    console.log(resultat); // Affiche "Données asynchrones"
}

2. Utilisation de await :

Le mot-clé await peut être utilisé à l'intérieur d'une fonction asynchrone pour attendre qu'une promesse soit résolue ou rejetée. L'exécution de la fonction asynchrone est suspendue jusqu'à ce que la promesse soit résolue, et la valeur résolue de la promesse est renvoyée.

Exemple d'Utilisation de await :

async function obtenirDonnees() {
    let response = await fetch('https://api.example.com/data');
    let data = await response.json();
    return data;
}

obtenirDonnees().then(data => console.log(data));

3. Gestion des Erreurs avec try...catch :

Vous pouvez utiliser un bloc try...catch pour gérer les erreurs lors de l'utilisation de await. Cela vous permet de capturer les erreurs qui se produisent pendant l'exécution de la promesse et de les traiter de manière appropriée.

Exemple de Gestion des Erreurs avec async/await :

async function obtenirDonnees() {
    try {
        let response = await fetch('https://api.example.com/data');
        let data = await response.json();
        return data;
    } catch (erreur) {
        console.error('Erreur : ' + erreur);
    }
}

4. Utilisation de async/await avec Promises.all :

Vous pouvez également utiliser async/await avec Promise.all pour exécuter plusieurs promesses en parallèle et attendre qu'elles se terminent toutes avant de traiter les résultats.

Exemple avec Promise.all et async/await :

async function obtenirToutesLesDonnees() {
    try {
        let [data1, data2] = await Promise.all([
            fetch('https://api.example.com/data1'),
            fetch('https://api.example.com/data2')
        ]);

        let json1 = await data1.json();
        let json2 = await data2.json();

        return [json1, json2];
    } catch (erreur) {
        console.error('Erreur : ' + erreur);
    }
}

5. Utilisation d'async/await avec des Fonctions Traditionnelles :

Bien que les fonctions asynchrones soient souvent utilisées avec await, vous pouvez également utiliser await à l'intérieur de fonctions traditionnelles en les marquant avec async.

Exemple :

function fonctionTraditionnelle() {
    return new Promise(resolve => {
        setTimeout(() => resolve('Données asynchrones'), 1000);
    });
}

async function utiliserAwaitDansFonctionTraditionnelle() {
    let resultat = await fonctionTraditionnelle();
    console.log(resultat); // Affiche "Données asynchrones"
}

En résumé, l'utilisation de async/await en JavaScript simplifie la gestion des opérations asynchrones en permettant d'écrire du code asynchrone de manière plus lisible et plus semblable à un code synchrone. En comprenant comment utiliser les fonctions asynchrones, le mot-clé await et la gestion des erreurs avec try...catch, vous pouvez écrire un code asynchrone plus clair et plus maintenable.