Frontend Academy · Leçon

Rappels et enfer des rappels

Rappels et enfer des rappels est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.

Que sont les fonctions de rappel ?

Une fonction de rappel est une fonction transmise comme argument à une autre fonction, afin d'être appelée plus tard lorsque certaines opérations sont terminées. Les fonctions de rappel constituent le modèle asynchrone d'origine de JavaScript : elles sont antérieures aux promesses.

// Synchronous callback:
[1, 2, 3].forEach(function(n) {
  console.log(n);
});

// Async callback:
setTimeout(function() {
  console.log('1 second later');
}, 1000);

Les fonctions de rappel avec erreur en premier de Node.js

Node.js a normalisé une convention : les fonctions de rappel reçoivent une erreur comme premier argument et le résultat comme second. Si l'erreur vaut null/undefined, l'opération a réussi.

fs.readFile('data.json', 'utf8', function(err, data) {
  if (err) {
    console.error('Failed to read file:', err);
    return;
  }
  console.log('File contents:', data);
});

Étapes asynchrones avec des fonctions de rappel

Lorsqu'une opération asynchrone dépend du résultat d'une autre, vous imbriquez les fonctions de rappel. Trois étapes séquentielles deviennent déjà difficiles à lire.

getUser(userId, function(err, user) {
  if (err) return handleError(err);
  getOrders(user.id, function(err, orders) {
    if (err) return handleError(err);
    getInvoice(orders[0].id, function(err, invoice) {
      if (err) return handleError(err);
      // Finally use invoice
      renderInvoice(invoice);
    });
  });
});

L'enfer des fonctions de rappel — la pyramide du désespoir

Les imbrications profondes sont appelées enfer des fonctions de rappel ou pyramide du désespoir. Problèmes : le code se décale vers la droite à chaque niveau, la gestion des erreurs est répétitive, le déroulement est difficile à suivre et la refactorisation est pénible.

Les problèmes de l'enfer des fonctions de rappel

1) La gestion des erreurs exige un if(err) explicite à chaque niveau. 2) Le débogage est difficile : les traces de pile ne montrent pas la chaîne logique. 3) Le code est difficile à lire lorsqu'il est organisé en couches horizontales. 4) Il est facile de manquer accidentellement des erreurs.

Atténuation : des fonctions nommées

Extrayez les fonctions de rappel imbriquées dans des fonctions nommées placées au niveau supérieur. Cela aplatit les imbrications et rend chaque étape testable de manière isolée, mais ne résout pas le problème fondamental de coordination.

function onInvoice(err, invoice) {
  if (err) return handleError(err);
  renderInvoice(invoice);
}
function onOrders(err, orders) {
  if (err) return handleError(err);
  getInvoice(orders[0].id, onInvoice);
}
function onUser(err, user) {
  if (err) return handleError(err);
  getOrders(user.id, onOrders);
}
getUser(userId, onUser);

Bibliothèques de contrôle du flux (repères historiques)

Des bibliothèques comme async.js fournissaient des utilitaires (async.waterfall, async.parallel) pour gérer les flux fondés sur des fonctions de rappel. Elles représentaient l'état de l'art avant l'arrivée des promesses dans ES2015.

Pourquoi les fonctions de rappel ne vont pas disparaître

Les fonctions de rappel sont toujours présentes partout : les écouteurs d'événements, les méthodes de tableau, setTimeout et les API de flux les utilisent tous. L'essentiel est que, pour l'enchaînement asynchrone, les promesses et async/await sont supérieurs. Les fonctions de rappel restent parfaitement adaptées aux événements simples qui ne se produisent qu'une fois.

Des fonctions de rappel aux promesses : la promisification

La fonction util.promisify() de Node.js enveloppe les fonctions de rappel avec erreur en premier dans des versions qui renvoient des promesses. Elle fait le lien entre les API historiques et le code moderne utilisant async/await.

const { promisify } = require('util');
const readFile = promisify(require('fs').readFile);

async function readConfig() {
  const data = await readFile('config.json', 'utf8');
  return JSON.parse(data);
}

Quand les fonctions de rappel restent le bon outil

Les écouteurs d'événements (addEventListener) attendent des fonctions de rappel, ce qui est parfaitement adapté : ils se déclenchent plusieurs fois. Les gestionnaires de données des flux attendent eux aussi des fonctions de rappel. Les promesses représentent des résultats asynchrones ponctuels ; les fonctions de rappel sont des abonnements à plusieurs événements.

La voie à suivre : les promesses et async/await

Les promesses, introduites dans ES2015, et async/await, introduit dans ES2017, ont résolu l'enfer des fonctions de rappel. Le code JavaScript moderne utilise presque toujours async/await pour les opérations asynchrones séquentielles. Comprendre les fonctions de rappel reste important pour lire du code ancien et le fonctionnement interne des bibliothèques.

Vérification rapide

Quel est le principal problème décrit par l'expression « enfer des fonctions de rappel » ?

Récapitulatif : les fonctions de rappel

Les fonctions de rappel sont des fonctions transmises à d'autres fonctions pour être appelées plus tard. Elles constituent le modèle asynchrone d'origine. Les fonctions de rappel avec erreur en premier (err, résultat) suivent la convention de Node.js. Les imbrications profondes créent l'enfer des fonctions de rappel. Extrayez des fonctions nommées pour aplatir les imbrications. Utilisez les promesses et async/await pour les flux asynchrones séquentiels. Les fonctions de rappel restent adaptées aux écouteurs d'événements et aux flux.

Questions Fréquemment Posées

La leçon « Rappels et enfer des rappels » est-elle gratuite ?

Oui — le texte complet de « Rappels et enfer des rappels » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Rappels et enfer des rappels » ?

Comprenez l’asynchronisme fondé sur les rappels, identifiez le problème d’imbrication appelé « enfer des rappels » et découvrez pourquoi les Promises ont été introduites pour le résoudre. Tu pratiques Frontend Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Frontend Academy ?

Aucune expérience préalable n'est requise. Frontend Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.

Combien de temps prend la leçon « Rappels et enfer des rappels » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Frontend Academy ?

Oui. Chaque leçon Frontend Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

La boucle d’événements : pile d’appels, file et microtâches
Rappels et enfer des rappels
Promises : then, catch, finally et Promise.all
async/await et gestion des erreurs

← Retour à Frontend Academy