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.

214 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
208 vues
Modification du contenu et des styles
Modification du Contenu et des Styles des Éléments HTML en JavaScriptLa modification du contenu et des styles des éléments HTML est une tâche courante en développement web. Cela permet de...
JS
344 vues
Utilisation de <tr> pour les lignes, <th> pour les en-têtes et <td> pour les cellules
Utilisation de <tr> pour les lignes, <th> pour les en-têtes et <td> pour les cellulesDans un tableau HTML, la balise <tr> est utilisée pour définir chaque ligne du tableau,...
HTML
391 vues
Comprendre le rôle de JavaScript dans le développement web
Le rôle de JavaScript dans le développement webJavaScript est un langage de programmation qui joue un rôle crucial dans le développement web moderne. Il est largement utilisé pour rendre les...
JS
287 vues
Sélecteurs d'attribut : styliser en fonction des attributs des éléments HTML
Sélecteurs d'Attribut : Styliser en fonction des attributs des éléments HTMLLes sélecteurs d'attribut en CSS permettent de cibler des éléments HTML en fonction de la présence ou de la valeur...
CSS
4 209 vues
Créer sa première page
Attention ! ⚠️ À partir de ce cours je ne détaillerais plus comme le cours précédent.À la place il sera expliqué ce que la vidéo va vous apporter et .. comme toujours le code sera...
Créer son site de rencontres
2 088 vues
Demande d'amis en PHP (2/3)
Dans cette deuxième vidéos nous allons développer notre système de relation d’amitié afin de faire apparaître les bons boutons en fonction de l'état de la relation entre 2 membres.
Créer son site de rencontres
681 vues
Utilisation de la propriété display pour contrôler le type d'affichage des éléments
La propriété display en CSS permet de contrôler le type d'affichage d'un élément. Elle détermine comment l'élément est rendu dans le flux de la page. Il existe plusieurs valeurs pour la...
CSS
307 vues
Instructions conditionnelles (if, else, elseif)
Les instructions conditionnelles en PHP permettent d'exécuter des blocs de code en fonction de certaines conditions. Les trois principales structures conditionnelles en PHP sont if, else et elseif....
PHP
Publicité
Cette pub permet au site de vivre ...