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.

277 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
3 196 vues
Comprendre le rôle de CSS dans la conception Web.
Le rôle de CSS dans la conception WebCSS, ou Cascading Style Sheets, est un langage de style utilisé pour définir la présentation visuelle des pages Web. Il agit comme une couche de style qui...
CSS
2 002 vues
Comprendre la syntaxe pour insérer des données dans des colonnes spécifiques ou dans toutes les colonnes
1. Insertion de Données dans Toutes les Colonnes :Pour insérer des données dans toutes les colonnes d'une table, voici la syntaxe générale :INSERT INTO nom_de_la_table VALUES (valeur_colonne1,...
SQL
490 vues
Introduction à CSS pour la mise en forme
Introduction à CSS pour la mise en formeCSS (Cascading Style Sheets) est un langage de feuilles de style utilisé pour définir la présentation visuelle des documents HTML. Il permet de contrôler...
HTML
1 902 vues
Création de tables avec PhpMyAdmin
1. Accéder à PhpMyAdmin :Ouvrez un navigateur web et accédez à l'URL où vous avez installé PhpMyAdmin sur votre serveur.2. Authentification :Connectez-vous à PhpMyAdmin en utilisant vos...
SQL
1 635 vues
Afficher les messages dans l'ordre
Dans cette vidéo on va personnaliser (un peu) l'interface des conversations avec du CSS.Nous allons également remettre les messages dans l'ordre et lors de la réception du message par le...
Créer son site de rencontres
1 644 vues
Configurer l'environnement de développement
Configuration de l'environnement de développement pour SASS1. Création d'une structure de projet :Avant de commencer à coder en SASS, il est important d'avoir une structure de projet organisée....
Sass
311 vues
Déclaration de fonctions
Déclaration de Fonctions en JavaScriptEn JavaScript, les fonctions sont des blocs de code réutilisables qui peuvent être appelés pour effectuer une tâche spécifique. Elles peuvent prendre des...
JS
4 785 vues
Que mettre dans la balise head
Afin de continuer à faire connaitre votre site pour son référencement nous allons parler du contenu de base dans la balise <head>.La balise <head> joue un rôle essentiel...
Créer son site
Publicité
Cette pub permet au site de vivre ...