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.

251 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
2 093 vues
Définition des caractéristiques de la base de données : le nom, le jeu de caractères, etc.
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
3 915 vues
Variables : Déclarer et utiliser des variables pour stocker des valeurs réutilisables
Variables en SASS : Déclarer et Utiliser1. Déclaration de variables :En SASS, les variables commencent par le symbole $ suivi du nom de la variable et de sa valeur. Par exemple :$primary-color:...
Sass
3 404 vues
Définir l'encodage de caractères avec <meta charset="utf-8">
Définir l'encodage de caractères avec <meta charset="utf-8">L'encodage de caractères définit la correspondance entre les caractères et les valeurs binaires utilisées par l'ordinateur....
HTML
2 850 vues
Comment faire connaitre son site ?
L'un des derniers points qui n'est pas sans conséquence est la promotion de son site après l'avoir mis en ligne sur un hébergeur (OVH, 1and1, Hostinger, etc.).L'une des questions que...
Créer son site
9 955 vues
Valider son compte avec un mail
Dans cet article nous allons développer un système qui permettra d'envoyer un mail à votre nouvel utilisateur avec une clé afin de confirmer son compte sur votre site.Pour commencer il faudra...
Créer son site
425 vues
Sélection d'éléments HTML
Sélection d'Éléments HTML en JavaScriptLa sélection d'éléments HTML est une opération fondamentale en JavaScript. Cela permet d'interagir avec les éléments de la page web, de modifier leur...
JS
344 vues
Boucles (for, while, do-while, foreach)
Les boucles en PHP permettent d'exécuter un bloc de code plusieurs fois, en fonction d'une condition spécifiée. Les principales boucles en PHP sont for, while, do-while et foreach. Voici un cours...
PHP
395 vues
Comparaison avec d'autres langages de programmation
Comparaison de JavaScript avec d'autres langages de programmationJavaScript est un langage de programmation unique avec ses propres caractéristiques et particularités. Comprendre comment il se...
JS
Publicité
Cette pub permet au site de vivre ...