Programmation asynchrone en JavaScript : rappels, promesses et asynchrone/attente

La programmation asynchrone est un aspect clé de JavaScript qui permet aux développeurs d'effectuer de longues requêtes réseau, des opérations sur les fichiers et d'autres tâches fastidieuses sans bloquer le thread principal. Cela garantit que les applications restent réactives et conviviales. JavaScript propose trois méthodes principales pour gérer les opérations asynchrones : les rappels, les promesses et l'asynchrone/l'attente. Dans cet article, nous examinerons chacune de ces méthodes, en explorant leur syntaxe, leur utilisation et leurs différences à travers des exemples détaillés.

Table des matières

1. Introduction à la programmation asynchrone
2. Rappels
   • Syntaxe et exemple
   • Avantages et inconvénients
3. Promesses
   • Syntaxe et exemple
   • Enchaîner les promesses
   • Avantages et inconvénients
4. Asynchrone/Attente
   • Syntaxe et exemple
   • Gestion des erreurs
   • Avantages et inconvénients
5. Comparaison et meilleures pratiques
6. Conclusion

Introduction à la programmation asynchrone

En JavaScript, les opérations qui prennent du temps, telles que la récupération de données sur un serveur, la lecture de fichiers ou l'exécution de calculs, peuvent être traitées de manière asynchrone. Cela signifie qu'en attendant la fin d'une opération, le moteur JavaScript peut continuer à exécuter d'autres tâches. Ceci est crucial pour créer des expériences utilisateur efficaces et fluides dans les applications Web.

Rappels

Syntaxe et exemple

Les rappels sont l'une des premières méthodes de gestion des opérations asynchrones en JavaScript. Un rappel est simplement une fonction passée en argument à une autre fonction, qui sera exécutée une fois une opération asynchrone terminée.

function fetchData(callback) {
    setTimeout(() => {
        callback("Data fetched!");
    }, 1000);
}

function displayData(data) {
    console.log(data);
}

fetchData(displayData);

Dans l'exemple ci-dessus, fetchData simule une opération asynchrone à l'aide de setTimeout. Après 1 seconde, il appelle la fonction displayData, en passant les données récupérées comme argument.

Avantages et inconvénients

Avantages :

• Simple et direct pour les petites tâches.
• Fournit un moyen d'exécuter du code une fois une opération asynchrone terminée.

Inconvénients :

• Peut conduire à un « enfer de rappel » lorsque plusieurs opérations asynchrones sont imbriquées, rendant le code difficile à lire et à maintenir.
• La gestion des erreurs est lourde, car les erreurs doivent être gérées dans chaque rappel.

Promesses

Syntaxe et exemple

Des promesses ont été introduites dans ES6 (ECMAScript 2015) pour résoudre les problèmes associés aux rappels. Une promesse représente une opération qui n’est pas encore terminée mais qui est attendue dans le futur. Il peut être dans l'un des trois états suivants : en attente, exécuté ou rejeté.

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("Data fetched!");
        }, 1000);
    });
}

fetchData()
    .then(data => {
        console.log(data);
    })
    .catch(error => {
        console.error("Error:", error);
    });

Dans cet exemple, fetchData renvoie une promesse qui se résout par « Données récupérées ! » après 1 seconde. La méthode then est utilisée pour gérer la valeur résolue et catch est utilisée pour gérer les erreurs.

Enchaîner les promesses

Les promesses peuvent être enchaînées pour effectuer une série d'opérations asynchrones en séquence.

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("Data fetched!");
        }, 1000);
    });
}

function processData(data) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(`${data} Processed!`);
        }, 1000);
    });
}

fetchData()
    .then(data => {
        console.log(data);
        return processData(data);
    })
    .then(processedData => {
        console.log(processedData);
    })
    .catch(error => {
        console.error("Error:", error);
    });

Dans cet exemple, processData est appelé après fetchData et les résultats sont traités dans l'ordre à l'aide de then.

Avantages et inconvénients

Avantages :

• Évite l'enfer des rappels en permettant le chaînage d'opérations asynchrones.
• Fournit une gestion intégrée des erreurs avec catch.
• Améliore la lisibilité et la maintenabilité du code.

Inconvénients :

• Peut encore devenir complexe avec plusieurs appels puis imbriqués.
• La gestion des erreurs dans une chaîne peut être non triviale.

Asynchrone/Attente

Syntaxe et exemple

Async/Await, introduit dans ES2017, fournit un moyen plus lisible et concis d'écrire du code asynchrone à l'aide de Promises. Le mot-clé async est utilisé pour définir une fonction asynchrone et le mot-clé wait est utilisé pour suspendre l'exécution jusqu'à ce qu'une promesse soit résolue.

async function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("Data fetched!");
        }, 1000);
    });
}

async function displayData() {
    const data = await fetchData();
    console.log(data);
}

displayData();

Dans cet exemple, displayData est une fonction asynchrone qui attend la fin de fetchData avant d'enregistrer les données.

Gestion des erreurs

La gestion des erreurs avec Async/Await peut être effectuée à l'aide de blocs try/catch.

async function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            reject("Failed to fetch data!");
        }, 1000);
    });
}

async function displayData() {
    try {
        const data = await fetchData();
        console.log(data);
    } catch (error) {
        console.error("Error:", error);
    }
}

displayData();

Ici, si fetchData échoue, l'erreur est détectée et enregistrée par le bloc catch.

Avantages et inconvénients

Avantages :

• Simplifie le code asynchrone, le faisant ressembler davantage à du code synchrone.
• Améliore la lisibilité et la maintenabilité du code.
• Simplifie la gestion des erreurs avec les blocs try/catch.

Inconvénients :

• Nécessite une compréhension des promesses puisque Async/Await est construit sur elles.
• Encore relativement nouveau, certains environnements peuvent donc ne pas le prendre entièrement en charge.

Comparaison et meilleures pratiques

Comparaison

• Rappels : convient aux tâches asynchrones simples à un seul niveau, mais peut conduire à un enfer de rappel dans des scénarios complexes.
• Promesses : Améliorer la lisibilité et la gérabilité, permettant l'enchaînement des opérations asynchrones. Gestion des erreurs intégrée avec catch.
• Async/Await : fournit le moyen le plus lisible et le plus maintenable d'écrire du code asynchrone. Simplifie la gestion des erreurs et ressemble à du code synchrone.

Meilleures pratiques

• Utilisez Async/Await pour la plupart des scénarios dans lesquels vous devez gérer des opérations asynchrones. Il offre la meilleure lisibilité et simplicité.
• Utilisez Promises lorsque vous devez effectuer plusieurs opérations asynchrones en séquence ou lorsque vous utilisez des bibliothèques qui renvoient des promesses.
• Évitez les rappels sauf si vous travaillez avec du code existant ou lorsque vous traitez des tâches asynchrones très simples.

Conclusion

La programmation asynchrone en JavaScript est essentielle pour créer des applications réactives et efficaces. Comprendre les différences entre les rappels, les promesses et Async/Await permet aux développeurs de choisir le bon outil pour leur cas d'utilisation spécifique. Bien que les rappels constituent la forme la plus simple de gestion des opérations asynchrones, ils peuvent conduire à un code désordonné. Les promesses offrent une approche plus structurée, mais Async/Await fournit la solution la plus élégante et la plus lisible. En suivant les meilleures pratiques et en comprenant ces outils, les développeurs peuvent écrire du code asynchrone propre, maintenable et efficace.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!