Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Apprendre Compréhension des Callbacks en JavaScript | JavaScript Asynchrone et Intégration d’API
Maîtrise Avancée de JavaScript

bookCompréhension des Callbacks en JavaScript

Qu'est-ce qu'un Callback ?

En JavaScript, les callbacks sont fréquemment utilisés pour gérer des tâches asynchrones, telles que la récupération de données depuis une API, la lecture de fichiers ou l'attente d'une saisie utilisateur.

Les callbacks constituent la base de la programmation asynchrone en JavaScript, car ils permettent au programme de traiter des tâches nécessitant du temps sans bloquer l'exécution du reste du code.

Fonctionnement des Callbacks dans la Programmation Asynchrone

Lors d'une opération asynchrone, une fonction de rappel (callback) est exécutée une fois l'opération terminée, garantissant ainsi que le reste du programme peut continuer pendant l'attente de l'achèvement de la tâche.

index.html

index.html

index.js

index.js

copy
  • fetchData : Simule une opération asynchrone (comme la récupération de données), qui prend 2 secondes pour s'exécuter. La fonction de rappel (callback) est invoquée une fois que les données sont disponibles ;
  • displayData : La fonction de rappel transmise à fetchData. Elle est appelée avec les données récupérées une fois l'opération terminée ;
  • Le reste du code continue de s'exécuter pendant la récupération des données, et lorsque les données sont prêtes, le callback est déclenché pour les traiter.

Problèmes liés aux callbacks : Callback Hell et imbrication

Bien que les callbacks soient puissants, ils peuvent rapidement entraîner des problèmes lorsqu'il existe de nombreuses opérations asynchrones dépendantes les unes des autres. Cela conduit souvent au « callback hell », où les callbacks sont profondément imbriqués, rendant le code difficile à lire et à maintenir.

getUser(1, user => {
  console.log('User fetched:', user);

  getOrders(user.id, orders => {
    console.log('Orders fetched:', orders);

    getOrderDetails(orders[0].id, orderDetails => {
      console.log('Order details fetched:', orderDetails);

      getShippingStatus(orderDetails.shippingId, status => {
        console.log('Shipping status fetched:', status);
      });
    });
  });
});

Cet exemple illustre le callback hell (enfer des rappels), un problème qui survient lorsque plusieurs opérations asynchrones dépendent les unes des autres, entraînant des rappels profondément imbriqués. Ici, chaque fonction (getUser, getOrders, getOrderDetails, getShippingStatus) dépend du résultat de la précédente, ce qui aboutit à une structure imbriquée difficile à lire, à maintenir et à déboguer. Cette approche complique la gestion des erreurs, le contrôle du flux et toute modification future, rendant le code lourd à manipuler à mesure que le nombre de rappels augmente.

Refactorisation des callbacks pour un code plus propre

Pour éviter le callback hell et améliorer la lisibilité ainsi que la maintenabilité de votre code, il existe plusieurs stratégies pour refactoriser les callbacks :

Fonctions nommées : Au lieu d'utiliser des fonctions de rappel anonymes, créez des fonctions nommées qui peuvent être réutilisées et permettent de garder le code plus organisé.

function getUserCallback(user) {
  console.log('User fetched:', user);
  getOrders(user.id, getOrdersCallback);
}

function getOrdersCallback(orders) {
  console.log('Orders fetched:', orders);
  getOrderDetails(orders[0].id, getOrderDetailsCallback);
}

function getOrderDetailsCallback(orderDetails) {
  console.log('Order details fetched:', orderDetails);
  getShippingStatus(orderDetails.shippingId, getShippingStatusCallback);
}

function getShippingStatusCallback(status) {
  console.log('Shipping status fetched:', status);
}

getUser(1, getUserCallback);

En utilisant des fonctions nommées, le déroulement du code devient plus clair. Il est plus facile à comprendre, à maintenir et à déboguer que des callbacks anonymes profondément imbriqués.

Décomposition de la logique : Diviser les tâches complexes en fonctions plus petites. Chaque fonction doit effectuer une opération spécifique et appeler l'opération suivante. Cela réduit l'imbrication et rend le code plus modulaire.

Promises (abordées dans les chapitres suivants) : Les Promises sont une alternative moderne aux callbacks et offrent une manière plus claire et lisible de gérer les opérations asynchrones. Les Promises permettent d'éliminer le "callback hell" en chaînant les méthodes .then().

1. Qu'est-ce qu'une fonction de rappel (callback) ?

2. Qu'est-ce que le « callback hell » ?

question mark

Qu'est-ce qu'une fonction de rappel (callback) ?

Select the correct answer

question mark

Qu'est-ce que le « callback hell » ?

Select the correct answer

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 4. Chapitre 2

Demandez à l'IA

expand

Demandez à l'IA

ChatGPT

Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion

Suggested prompts:

Can you give an example of a simple callback in JavaScript?

What are some common use cases for callbacks in real-world applications?

How do callbacks differ from promises in handling asynchronous code?

Awesome!

Completion rate improved to 2.22

bookCompréhension des Callbacks en JavaScript

Glissez pour afficher le menu

Qu'est-ce qu'un Callback ?

En JavaScript, les callbacks sont fréquemment utilisés pour gérer des tâches asynchrones, telles que la récupération de données depuis une API, la lecture de fichiers ou l'attente d'une saisie utilisateur.

Les callbacks constituent la base de la programmation asynchrone en JavaScript, car ils permettent au programme de traiter des tâches nécessitant du temps sans bloquer l'exécution du reste du code.

Fonctionnement des Callbacks dans la Programmation Asynchrone

Lors d'une opération asynchrone, une fonction de rappel (callback) est exécutée une fois l'opération terminée, garantissant ainsi que le reste du programme peut continuer pendant l'attente de l'achèvement de la tâche.

index.html

index.html

index.js

index.js

copy
  • fetchData : Simule une opération asynchrone (comme la récupération de données), qui prend 2 secondes pour s'exécuter. La fonction de rappel (callback) est invoquée une fois que les données sont disponibles ;
  • displayData : La fonction de rappel transmise à fetchData. Elle est appelée avec les données récupérées une fois l'opération terminée ;
  • Le reste du code continue de s'exécuter pendant la récupération des données, et lorsque les données sont prêtes, le callback est déclenché pour les traiter.

Problèmes liés aux callbacks : Callback Hell et imbrication

Bien que les callbacks soient puissants, ils peuvent rapidement entraîner des problèmes lorsqu'il existe de nombreuses opérations asynchrones dépendantes les unes des autres. Cela conduit souvent au « callback hell », où les callbacks sont profondément imbriqués, rendant le code difficile à lire et à maintenir.

getUser(1, user => {
  console.log('User fetched:', user);

  getOrders(user.id, orders => {
    console.log('Orders fetched:', orders);

    getOrderDetails(orders[0].id, orderDetails => {
      console.log('Order details fetched:', orderDetails);

      getShippingStatus(orderDetails.shippingId, status => {
        console.log('Shipping status fetched:', status);
      });
    });
  });
});

Cet exemple illustre le callback hell (enfer des rappels), un problème qui survient lorsque plusieurs opérations asynchrones dépendent les unes des autres, entraînant des rappels profondément imbriqués. Ici, chaque fonction (getUser, getOrders, getOrderDetails, getShippingStatus) dépend du résultat de la précédente, ce qui aboutit à une structure imbriquée difficile à lire, à maintenir et à déboguer. Cette approche complique la gestion des erreurs, le contrôle du flux et toute modification future, rendant le code lourd à manipuler à mesure que le nombre de rappels augmente.

Refactorisation des callbacks pour un code plus propre

Pour éviter le callback hell et améliorer la lisibilité ainsi que la maintenabilité de votre code, il existe plusieurs stratégies pour refactoriser les callbacks :

Fonctions nommées : Au lieu d'utiliser des fonctions de rappel anonymes, créez des fonctions nommées qui peuvent être réutilisées et permettent de garder le code plus organisé.

function getUserCallback(user) {
  console.log('User fetched:', user);
  getOrders(user.id, getOrdersCallback);
}

function getOrdersCallback(orders) {
  console.log('Orders fetched:', orders);
  getOrderDetails(orders[0].id, getOrderDetailsCallback);
}

function getOrderDetailsCallback(orderDetails) {
  console.log('Order details fetched:', orderDetails);
  getShippingStatus(orderDetails.shippingId, getShippingStatusCallback);
}

function getShippingStatusCallback(status) {
  console.log('Shipping status fetched:', status);
}

getUser(1, getUserCallback);

En utilisant des fonctions nommées, le déroulement du code devient plus clair. Il est plus facile à comprendre, à maintenir et à déboguer que des callbacks anonymes profondément imbriqués.

Décomposition de la logique : Diviser les tâches complexes en fonctions plus petites. Chaque fonction doit effectuer une opération spécifique et appeler l'opération suivante. Cela réduit l'imbrication et rend le code plus modulaire.

Promises (abordées dans les chapitres suivants) : Les Promises sont une alternative moderne aux callbacks et offrent une manière plus claire et lisible de gérer les opérations asynchrones. Les Promises permettent d'éliminer le "callback hell" en chaînant les méthodes .then().

1. Qu'est-ce qu'une fonction de rappel (callback) ?

2. Qu'est-ce que le « callback hell » ?

question mark

Qu'est-ce qu'une fonction de rappel (callback) ?

Select the correct answer

question mark

Qu'est-ce que le « callback hell » ?

Select the correct answer

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 4. Chapitre 2
some-alt