Aller au contenu principal

Fonctions de rappel

Notions théoriques​

Une fonction de rappel, ou "callback" en anglais, est une fonction qui est passée en tant qu'argument à une autre fonction.

Cette fonction de rappel est ensuite invoquée à l'intérieur de la fonction externe pour accomplir une action spécifique.

astuce

Les fonctions de rappel sont couramment utilisées en JavaScript pour gérer les comportements asynchrones.

En JavaScript, les fonctions sont des objets. Cela signifie qu'elles peuvent être passées en tant qu'arguments à d'autres fonctions, tout comme n'importe quel autre objet (nombre, chaîne, tableau, etc.).

C'est cette caractéristique qui rend possible l'utilisation des fonctions de rappel.

remarque

Voici un exemple courant d'utilisation des fonctions de rappel.

Lorsqu'une requête est envoyée à un serveur pour récupérer des données, il peut s'écouler un certain temps avant que la réponse ne soit reçue.

Au lieu de bloquer l'exécution du reste du code en attendant la réponse, nous pouvons fournir une fonction de rappel qui sera exécutée une fois la réponse reçue.

Exemple pratique​

Voici un exemple simple d'utilisation d'une fonction de rappel :

function saluer(nom, callback) {
    let message = `Bonjour, ${nom} !`;
    callback(message);
}

saluer("Alice", function(message) {
    console.log(message);
});

Dans cet exemple, la fonction saluer prend 2 arguments :

  • une chaîne nom
  • et une fonction callback.

La fonction saluer :

  • crée un message de salutation
  • et appelle ensuite la fonction de rappel en lui passant le message.

Lorsque nous appelons la fonction saluer, nous lui passons le nom "Alice" et une fonction de rappel qui affiche le message sur la console.

remarque

Vous avez constaté que dans cet exemple la fonction de rappel est une fonction anonyme :

function(message) {
    console.log(message);
}

Quelques méthodes à connaître​

Voici 3 méthodes liées aux fonctions de rappel en JavaScript Promise.then(), Promise.catch(), et Promise.finally():

Ces méthodes sont utilisées pour gérer les promesses en JavaScript, qui sont un moyen de gérer les opérations asynchrones.

Les fonctions de rappel sont passées à ces méthodes pour être exécutées lorsque la promesse est :

  • résolue (avec .then())
  • ou rejetée (avec .catch()),
  • ou dans tous les cas (avec .finally()).

Par exemple :

let promesse = new Promise(function(resolve, reject) {
    // Une opération asynchrone
});

promesse.then(function(resultat) {
    console.log("Résultat :", resultat);
}).catch(function(erreur) {
    console.error("Erreur :", erreur);
}).finally(function() {
    console.log("Fin de l'opération");
});

Dans cet exemple :

  • Si l'opération asynchrone réussit, la fonction de rappel passée à .then() est appelée avec le résultat.
  • Si l'opération échoue, la fonction de rappel passée à .catch() est appelée avec l'erreur.
  • Dans tous les cas, la fonction de rappel passée à .finally() est appelée.
Pour décortiquer les promesses

  1. Promise.then():

    La méthode then() est attachée à une promesse et prend jusqu'à deux arguments : des fonctions de rappel pour le succès et l'échec des cas respectivement. Si la promesse est résolue avec succès, la méthode then() est appelée, et la fonction de rappel pour le succès est exécutée avec la valeur de résolution.

    let promesse = new Promise(function(resolve, reject) {
        resolve("Promesse résolue");
    });

    promesse.then(function(value) {
        console.log(value);  // Affiche "Promesse résolue"
    }, function(reason) {
        console.log(reason);  // Ne sera pas appelé
    });

  2. Promise.catch():

    La méthode catch() est attachée à une promesse et est utilisée pour spécifier ce qui doit se passer si la promesse est rejetée. Elle prend une seule fonction de rappel qui est appelée avec la raison du rejet.

    let promesse = new Promise(function(resolve, reject) {
        reject("Promesse rejetée");
    });

    promesse.catch(function(reason) {
        console.log(reason);  // Affiche "Promesse rejetée"
    });

  3. Promise.finally():

    La méthode finally() est attachée à une promesse et permet de spécifier du code qui sera exécuté que la promesse soit résolue ou rejetée. Elle est utile pour effectuer du nettoyage ou des opérations de finalisation.

    let promesse = new Promise(function(resolve, reject) {
        resolve("Promesse résolue");
    });

    promesse.finally(function() {
        console.log("Ceci sera exécuté dans tous les cas");  // S'exécute indépendamment du résultat de la promesse
    });

    Dans cet exemple, la fonction de rappel passée à finally() sera exécutée, que la promesse soit résolue ou rejetée. Notez que finally() ne reçoit aucune valeur de résolution ou de rejet.

Test de mémorisation/compréhension​


Qu'est-ce qu'une fonction de rappel en JavaScript ?


Quelle méthode permet de planifier l'exécution d'une fonction après un certain délai ?


Quelle méthode permet de planifier l'exécution répétée d'une fonction à des intervalles de temps spécifiés ?


Quelle méthode est utilisée pour créer une nouvelle promesse ?


Quelle méthode est appelée lorsque la promesse est rejetée ?


Que signifie une promesse 'résolue' ?


Quelle méthode est utilisée pour exécuter du code indépendamment du résultat de la promesse ?


Quelle valeur reçoit la méthode finally() ?


TP pour réfléchir et résoudre des problèmes​

Pour ce TP, nous allons créer un compte à rebours.

Le compte à rebours commencera à 10 et décrémentera chaque seconde jusqu'à 0, affichant le temps restant à chaque seconde.

Nous utiliserons une fonction de rappel et la méthode setInterval.

let compteur = 10;

function decompte() {
    ...
}

let intervalId = setInterval(decompte, 1000);
Une solution