JS

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.

183 vues
Posté le 27 juin 2024
Publicité Sitedudev
Cette pub permet au site de vivre ...
Publicité
Cette pub permet au site de vivre ...
Voir d'autres articles
11 653 vues
Barre de recherche : Ajax
À partir de maintenant nous allons développer notre script permettant de contacter une page et de l'exécuter afin d'afficher le résultat de notre saisie.Nous allons commencer par mettre cette...
Créer son site
92 vues
Vue d'ensemble de frameworks populaires comme React, Angular, et Vue.js
Vue d'ensemble des Frameworks Populaires : React, Angular et Vue.jsLes frameworks JavaScript tels que React, Angular et Vue.js sont largement utilisés pour le développement d'applications web...
JS
2 891 vues
Les balises HTML et leur utilisation
Cours sur les Balises HTML et leur UtilisationLes balises HTML sont les éléments fondamentaux utilisés pour structurer le contenu d'une page Web. Chaque balise a un rôle spécifique dans la...
HTML
2 449 vues
Supprimer un ami
Nous allons repartir sur notre page voir_profil.php afin de compléter le code ci-dessous.<form method="post">   <?php     if(!isset($relation['id'])){   ?>  ...
Créer son site
2 147 vues
Ajouter un avatar
Nous allons maintenant ajouter des avatars à nos profils et afficher ses avatars lors de l’affichage des membres 😁
Créer son site de rencontres
478 vues
CSS externe : l'utilisation de fichiers CSS séparés pour styliser plusieurs pages HTML
CSS Externe : L'utilisation de fichiers CSS séparés pour styliser plusieurs pages HTMLLe CSS externe est une méthode de stylisation où les styles sont définis dans des fichiers CSS distincts et...
CSS
8 265 vues
Barre de recherche : Complète
Barre de rechercheMaintenant que notre formulaire et que notre script sont fait, nous allons créer une nouvelle page PHP que l'on nommera recherche_utilisateur.php.Dans cette page...
Créer son site
1 856 vues
Envoyer un message sans recharger la page (1/2)
Nous allons améliorer notre messagerie interne vu que nous pouvons désormais envoyer et recevoir des messages.Pour cela nous allons utiliser du JavaScript avec de l'Ajax afin de faire des...
Créer son site de rencontres
Publicité
Cette pub permet au site de vivre ...