Maîtriser le JavaScript asynchrone : rappels, promesses et Async/Await simplifiés

JavaScript asynchrone : des rappels aux promesses et à l'asynchrone/à l'attente

Introduction

JavaScript est un langage de programmation puissant à thread unique largement utilisé pour le développement Web. Un défi courant en JavaScript consiste à gérer des tâches asynchrones, telles que la récupération de données à partir d'une API ou l'exécution d'opérations urgentes, sans bloquer le thread principal. Au fil du temps, les développeurs sont passés de l'utilisation des rappels aux promesses et désormais à la syntaxe async/wait plus élégante pour gérer les opérations asynchrones. Ce guide vous guidera à travers ces concepts étape par étape, en commençant par les bases et en passant par des scénarios avancés. À la fin, vous serez en mesure d'utiliser en toute confiance JavaScript asynchrone dans des applications du monde réel.

---

Qu’est-ce que la programmation asynchrone ?

En JavaScript, des tâches telles que la récupération de données sur un serveur, la lecture de fichiers ou la définition de délais d'attente peuvent prendre du temps. Au lieu d'attendre la fin de ces tâches (ce qui bloquerait l'exécution du reste du programme), JavaScript permet à ces tâches de s'exécuter de manière asynchrone. Cela signifie qu'ils sont gérés indépendamment du flux principal du programme, permettant à d'autres codes de s'exécuter sans délai.

---

Comprendre les rappels : le point de départ

Que sont les rappels ?

Un callback est une fonction passée en argument à une autre fonction. Lorsque la première fonction termine son opération, elle exécute la fonction de rappel pour signaler l'achèvement.

Exemple de rappel : Comprendre les bases

function fetchData(callback) {
    setTimeout(() => {
        console.log("Data fetched!");
        callback();
    }, 2000); // Simulates a 2-second delay
}

function processData() {
    console.log("Processing data...");
}

fetchData(processData);

Explication :

1. fetchData simule la récupération de données avec un délai.
2. Après le délai, il exécute la fonction de rappel (processData), indiquant que les données sont prêtes.

---

L’enfer des rappels : le problème

L'utilisation de rappels imbriqués pour gérer plusieurs tâches asynchrones peut rapidement conduire à un code illisible et difficile à maintenir.

setTimeout(() => {
    console.log("Step 1: Data fetched");
    setTimeout(() => {
        console.log("Step 2: Data processed");
        setTimeout(() => {
            console.log("Step 3: Data saved");
        }, 1000);
    }, 1000);
}, 1000);

Cette « pyramide du malheur » rend le débogage et la maintenance du code difficiles.

---

Promesses : une meilleure alternative

Que sont les promesses ?

Une promesse est un objet qui représente une valeur qui peut être disponible maintenant, dans le futur ou jamais. Les promesses ont trois états :

• En attente : Etat initial, ni réalisé ni rejeté.
• Réalisé : Opération terminée avec succès.
• Rejeté : L'opération a échoué.

Exemple de promesse : réécriture de l'enfer des rappels

function fetchData(callback) {
    setTimeout(() => {
        console.log("Data fetched!");
        callback();
    }, 2000); // Simulates a 2-second delay
}

function processData() {
    console.log("Processing data...");
}

fetchData(processData);

Avantages des promesses

1. Lisibilité améliorée avec chaînage.
2. Gestion intégrée des erreurs à l'aide de .catch().
3. Évite les rappels profondément imbriqués.

---

Async/Await : l'élégance moderne

Qu'est-ce qu'Async/Await ?

async/await est un sucre syntaxique par rapport aux promesses, introduit dans ES2017. Cela donne au code asynchrone un aspect synchrone, améliorant ainsi la lisibilité et la maintenabilité.

Exemple Async/Await : simplifier les promesses

setTimeout(() => {
    console.log("Step 1: Data fetched");
    setTimeout(() => {
        console.log("Step 2: Data processed");
        setTimeout(() => {
            console.log("Step 3: Data saved");
        }, 1000);
    }, 1000);
}, 1000);

Comment ça marche

1. mot-clé async : Déclare une fonction comme asynchrone.
2. mot-clé wait : suspend l'exécution de la fonction jusqu'à ce que la promesse soit résolue ou rejetée.

Avantages d'Async/Await

1. Code séquentiel et lisible.
2. Gestion des erreurs avec try...catch.
3. Réduit la complexité des rappels.

---

Gestion de scénarios du monde réel avec Async/Await

Exécution parallèle : Promise.all

Lorsque vous devez exécuter plusieurs tâches asynchrones indépendantes en parallèle :

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

function processData(data) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log(`Processing: ${data}`);
            resolve("Processed data");
        }, 1000);
    });
}

function saveData(data) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log(`Saving: ${data}`);
            resolve("Data saved");
        }, 1000);
    });
}

// Chaining Promises
fetchData()
    .then((data) => processData(data))
    .then((processedData) => saveData(processedData))
    .then((finalResult) => console.log(finalResult))
    .catch((error) => console.error("Error:", error));

Gestion des erreurs : essayez...catch vs .catch()

Gérez correctement les erreurs avec try...catch pour les fonctions asynchrones :

async function handleData() {
    try {
        const fetchedData = await fetchData();
        const processedData = await processData(fetchedData);
        const savedData = await saveData(processedData);
        console.log(savedData);
    } catch (error) {
        console.error("Error:", error);
    }
}

handleData();

---

FAQ courantes sur le JavaScript asynchrone

Que se passe-t-il si j'oublie d'attendre ?

La fonction renvoie une promesse au lieu de la valeur résolue. Cela peut conduire à un comportement inattendu.

async function fetchAllData() {
    const task1 = fetchData();
    const task2 = fetchData();
    const results = await Promise.all([task1, task2]);
    console.log("All data fetched:", results);
}
fetchAllData();

Puis-je utiliser Async/Await sans promesses ?

Non, wait fonctionne exclusivement avec des promesses. Cependant, des bibliothèques comme fetch et l'API fs.promises de Node.js fournissent des méthodes natives basées sur des promesses.

Quand dois-je utiliser les rappels ?

Les rappels sont toujours utiles pour les petites tâches simples ou lorsque vous travaillez avec des API plus anciennes qui ne prennent pas en charge les promesses.

---

Conclusion

La maîtrise du JavaScript asynchrone est essentielle pour tout développeur travaillant avec des applications Web modernes. En commençant par les rappels, vous pouvez apprécier comment les promesses et async/wait simplifient le code asynchrone et améliorent la lisibilité. Utilisez les rappels avec parcimonie, tirez parti des promesses pour une meilleure gestion des erreurs et adoptez async/wait pour un code propre et intuitif. Armé de ces outils, vous serez prêt à relever tout défi asynchrone dans vos projets.

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!