Programmation asynchrone en JavaScript : guide complet pour débutants

Introduction à la programmation asynchrone en JavaScript

JavaScript est un langage de programmation monothread. Cela signifie qu'une seule opération est exécutée à la fois. Cependant, si toutes les opérations étaient exécutées séquentiellement, le navigateur "se bloquerait" lors du chargement de données depuis un serveur ou de la lecture d'un fichier. C'est ici que la programmation asynchrone vient à la rescousse.

La programmation asynchrone permet d'exécuter des opérations longues (requêtes API, lecture de fichiers, minuteries) sans bloquer le thread d'exécution principal. Au lieu d'attendre la fin d'une tâche, le code continue de s'exécuter, et le résultat est traité plus tard. C'est un concept clé pour créer des applications rapides et réactives sur Node.js.

Dans ce guide, nous aborderons trois approches principales de la programmation asynchrone : les callbacks, les promesses et la syntaxe async/await. Vous apprendrez à travailler correctement avec du code asynchrone et à éviter les erreurs typiques des débutants.

1. Callbacks : le fondement de l'asynchronisme

Un callback est une fonction qui est passée en argument à une autre fonction et qui est appelée après la fin d'une opération asynchrone. C'est la méthode la plus ancienne et la plus basique pour travailler avec l'asynchronisme en JavaScript.

Exemple avec setTimeout

La fonction intégrée setTimeout est un exemple classique d'opération asynchrone. Elle prend un callback et un délai en millisecondes :

console.log('Début');\n\nsetTimeout(() => {\n    console.log('2 secondes se sont écoulées');\n}, 2000);\n\nconsole.log('Fin');\n\n// Affichage :\n// Début\n// Fin\n// 2 secondes se sont écoulées

Remarquez que "Fin" s'affiche avant le message du callback. C'est cela l'asynchronisme — le code n'attend pas la fin de setTimeout.

Le problème de "Callback Hell"

Lorsque vous avez de nombreuses opérations asynchrones imbriquées, le code devient difficile à lire. Ce phénomène est appelé "l'enfer des callbacks" (Callback Hell) :

fs.readFile('fichier1.txt', (err, data1) => {\n    if (err) throw err;\n    fs.readFile('fichier2.txt', (err, data2) => {\n        if (err) throw err;\n        fs.readFile('fichier3.txt', (err, data3) => {\n            if (err) throw err;\n            console.log(data1, data2, data3);\n        });\n    });\n});

Un tel code est difficile à maintenir et à déboguer. Heureusement, le JavaScript moderne propose des solutions plus élégantes.

2. Promesses (Promises) : une gestion élégante de l'asynchronisme

Une Promise (promesse) est un objet représentant le résultat d'une opération asynchrone. Une promesse peut se trouver dans l'un des trois états suivants :

\n
• Pending (en attente) — état initial, l'opération n'est pas encore terminée
\n
• Fulfilled (tenue) — l'opération s'est terminée avec succès
\n
• Rejected (rejetée) — l'opération s'est terminée par une erreur
\n

Création et utilisation d'une Promise

const maPromesse = new Promise((resolve, reject) => {\n    setTimeout(() => {\n        const succes = true;\n        if (succes) {\n            resolve('Données reçues');\n        } else {\n            reject('Erreur de réception des données');\n        }\n    }, 2000);\n});\n\nmaPromesse\n    .then(resultat => {\n        console.log(resultat); // "Données reçues"\n    })\n    .catch(erreur => {\n        console.error(erreur); // "Erreur de réception des données"\n    })\n    .finally(() => {\n        console.log('Opération terminée');\n    });

Chaînage de promesses (Chaining)

Les promesses peuvent être chaînées, ce qui permet d'éviter "l'enfer des callbacks" :

function lireFichier(nomFichier) {\n    return new Promise((resolve, reject) => {\n        fs.readFile(nomFichier, 'utf8', (err, data) => {\n            if (err) reject(err);\n            else resolve(data);\n        });\n    });\n}\n\nlireFichier('fichier1.txt')\n    .then(data1 => {\