Comprendre la programmation asynchrone JavaScript : rappels, promesses et asynchrone/attente

La nature asynchrone de JavaScript est essentielle pour créer des applications conviviales, réactives et efficaces. Comprendre les idées fondamentales de la programmation asynchrone, telles que les rappels, les promesses et l'asynchrone/l'attente, est crucial pour une navigation réussie. Ce manuel décortiquera ces idées et examinera leurs applications, avantages et inconvénients.

---

Programmation asynchrone ou synchrone

Programmation Synchrone :

• En programmation synchrone, les tâches sont exécutées séquentiellement. Le programme attend qu'une tâche soit terminée avant de passer à la suivante.
• Cette approche peut conduire à des inefficacités, en particulier lors d'opérations chronophages telles que les requêtes réseau ou le traitement de fichiers.

Exemple de code synchrone :

function task1() {
    console.log("Task 1 started");
    for (let i = 0; i < 1e9; i++); // Simulating a long task
    console.log("Task 1 completed");
}

function task2() {
    console.log("Task 2 started");
    for (let i = 0; i < 1e9; i++); // Simulating a long task
    console.log("Task 2 completed");
}

task1(); // Executes first
task2(); // Executes after task1 is completed

Programmation asynchrone :

• La programmation asynchrone permet aux tâches de s'exécuter indépendamment, permettant au programme de continuer à exécuter d'autres opérations en attendant la fin de certaines tâches.
• Ceci est particulièrement utile pour les tâches telles que la récupération de données sur un serveur, où l'attente pourrait autrement geler l'interface utilisateur.

---

Pourquoi avons-nous besoin d’une programmation asynchrone ?

1. Réactivité : empêche l'interface utilisateur de ne plus répondre lors d'opérations longues.
2. Efficacité : permet l'exécution simultanée de plusieurs opérations, optimisant l'utilisation des ressources.
3. Expérience utilisateur : améliore les interactions en garantissant des flux de travail fluides et ininterrompus.

---

Rappels

Définition : Un rappel est une fonction passée en argument à une autre fonction, exécutée après l'achèvement d'une tâche.

Exemple :

function fetchData(callback) {
    console.log("Fetching data...");
    setTimeout(() => {
        const data = "Data received"; // Simulate fetched data
        callback(data); // Execute the callback with the data
    }, 2000);
}

fetchData((data) => {
    console.log(data); // Logs after data is fetched
});

Explication :

• La fonction fetchData simule un délai à l'aide de setTimeout.
• Une fois le délai terminé, le rappel est exécuté avec les données récupérées.

Problèmes de rappels :

• Callback Hell : lorsque plusieurs opérations asynchrones dépendent les unes des autres, les rappels profondément imbriqués rendent le code difficile à lire et à maintenir.

---

Promesses

Définition : Une promesse est un objet représentant l'achèvement (ou l'échec) éventuel d'une opération asynchrone et sa valeur résultante.

Avantages :

• Simplifie le chaînage des opérations asynchrones.
• Offre une meilleure gestion des erreurs par rapport aux rappels.

Exemple :

function fetchData() {
    return new Promise((resolve, reject) => {
        console.log("Fetching data...");
        setTimeout(() => {
            const data = "Data received";
            resolve(data); // Resolve the promise with data
        }, 2000);
    });
}

fetchData()
    .then(data => {
        console.log(data); // Logs after promise is resolved
    })
    .catch(error => {
        console.error(error); // Handles errors
    });

Explication :

• Les promesses améliorent la lisibilité en chaînant .then() pour le succès et .catch() pour la gestion des erreurs.
• Ils éliminent la structure imbriquée typique des rappels.

---

Asynchrone/Attente

Définition : Async/await est un sucre syntaxique construit sur des promesses, vous permettant d'écrire du code asynchrone qui ressemble et se comporte davantage comme du code synchrone.

Avantages :

• Améliore la lisibilité et la maintenabilité du code.
• Gère plus simplement la logique asynchrone.

Exemple :

function task1() {
    console.log("Task 1 started");
    for (let i = 0; i < 1e9; i++); // Simulating a long task
    console.log("Task 1 completed");
}

function task2() {
    console.log("Task 2 started");
    for (let i = 0; i < 1e9; i++); // Simulating a long task
    console.log("Task 2 completed");
}

task1(); // Executes first
task2(); // Executes after task1 is completed

Explication :

• Le mot-clé async indique que la fonction contient du code asynchrone.
• Le mot-clé wait suspend l'exécution jusqu'à ce que la promesse soit résolue, ce qui rend le code synchrone tout en restant non bloquant.

---

Résumé des points clés

1. Synchrone vs. Asynchrone :

   • Le code synchrone bloque l'exécution jusqu'à ce que les tâches soient terminées.
   • Le code asynchrone permet à d'autres tâches de s'exécuter simultanément.

2. Rappels :

   • Une fonction transmise pour gérer les résultats asynchrones.
   • Susceptible de rappeler l'enfer avec des dépendances complexes.

3. Promesses :

   • Une alternative plus propre aux rappels, prenant en charge le chaînage et la gestion des erreurs.

4. Async/Attendre :

   • Rend le code asynchrone plus lisible et maintenable.

---

Vous pouvez développer des applications JavaScript efficaces et faciles à utiliser en comprenant et en utilisant ces stratégies. L'apprentissage de la programmation asynchrone est essentiel pour devenir un développeur JavaScript qualifié, que vous gériez des tâches simples ou créiez des flux de travail complexes.

Suivez-moi sur : Github Linkedin Threads

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!