Les Callbacks en JavaScript


Les callbacks sont des fonctions passées en tant qu'arguments à d'autres fonctions, qui seront exécutées ultérieurement ou de manière asynchrone. Les callbacks sont largement utilisés en JavaScript, en particulier pour gérer des opérations asynchrones telles que les requêtes AJAX, les animations et les événements.


1. Utilisation des Callbacks :


Les callbacks sont utilisés pour spécifier le comportement à exécuter après l'achèvement d'une opération asynchrone. Ils sont souvent passés en tant qu'arguments à des fonctions qui effectuent ces opérations.


Exemple de Callback :


function traiterDonnees(callback) {
    // Simulation d'une opération asynchrone
    setTimeout(function() {
        let resultat = 'Données traitées avec succès';
        callback(resultat);
    }, 1000);
}

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

traiterDonnees(afficherResultat); // Passer la fonction afficherResultat comme callback


2. Callbacks Anonymes :


Vous pouvez également passer des fonctions anonymes comme callbacks. Cela est courant lorsqu'une fonction de rappel est simple et n'a pas besoin d'être réutilisée ailleurs dans le code.


Exemple de Callback Anonyme :


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


3. Gérer les Erreurs avec les Callbacks :


Les callbacks peuvent également être utilisés pour gérer les erreurs lors d'opérations asynchrones. Traditionnellement, le premier argument passé au callback est réservé pour les erreurs, tandis que les résultats sont passés en arguments suivants.


Exemple de Gestion d'Erreurs avec Callbacks :


function traiterDonnees(callback) {
    // Simulation d'une opération asynchrone
    setTimeout(function() {
        let erreur = null; // Aucune erreur
        let resultat = 'Données traitées avec succès';
        callback(erreur, resultat);
    }, 1000);
}

traiterDonnees(function(erreur, resultat) {
    if (erreur) {
        console.error('Erreur : ' + erreur);
    } else {
        console.log(resultat);
    }
});


4. Callbacks dans les Fonctions de Haut Niveau :


Les callbacks sont souvent utilisés dans les fonctions de haut niveau telles que forEach, map, filter, etc. Ces fonctions acceptent une fonction de rappel en argument pour être appliquée à chaque élément d'un tableau.


Exemple d'Utilisation de Callbacks avec forEach :


let nombres = [1, 2, 3, 4, 5];

nombres.forEach(function(nombre) {
    console.log(nombre * 2);
});


5. Utilisation de Promesses et de Fonctions Asynchrones :


Bien que les callbacks soient couramment utilisés pour gérer les opérations asynchrones, les promesses et les fonctions asynchrones sont maintenant largement utilisées pour des opérations plus complexes, offrant une syntaxe plus claire et évitant les problèmes de l'enfer des callbacks (callback hell).


Exemple de Promesse :


function traiterDonnees() {
    return new Promise(function(resolve, reject) {
        setTimeout(function() {
            let erreur = null; // Aucune erreur
            let resultat = 'Données traitées avec succès';
            resolve(resultat);
        }, 1000);
    });
}

traiterDonnees()
  .then(function(resultat) {
      console.log(resultat);
  })
  .catch(function(erreur) {
      console.error('Erreur : ' + erreur);
  });


En résumé, les callbacks sont une fonction essentielle en JavaScript, particulièrement utile pour gérer des opérations asynchrones. En comprenant comment les utiliser et les passer comme arguments à d'autres fonctions, vous pouvez développer des applications JavaScript plus dynamiques et réactives.

710 vues
Posté le 22 avril 2024
Publicité Sitedudev
Cette pub permet au site de vivre ...
Publicité
Cette pub permet au site de vivre ...
Voir d'autres articles
4 020 vues
Twitter Cards
Les Twitter Cards sont des protocoles qui vous permettent d’attacher des photos, des vidéos et autres médias interactifs à vos tweets afin d’amener...
Créer son site
2 464 vues
Accepter ou refuser une demande d'amis
Nous allons enfin terminer notre système d'amis en permettant à l'utilisateur d'accepter ou de refuser une ou plusieurs demande grâce à une liste contenant toutes les demandes que l'utilisateur...
Créer son site de rencontres
950 vues
Comment ces propriétés affectent le positionnement et la mise en page des éléments
Impact des Propriétés de Marge, Bordure, Rembourrage, Largeur et Hauteur sur le Positionnement et la Mise en Page des ÉlémentsEn CSS, les propriétés de marge, bordure, rembourrage, largeur et...
CSS
884 vues
Déclarations CSS : comment les combiner pour styliser les éléments
Déclarations CSS : Comment les combiner pour styliser les élémentsLes déclarations CSS sont des instructions individuelles qui spécifient le style des éléments HTML sur une page Web. Elles...
CSS
3 255 vues
Différences entre SASS et CSS
Différences entre SASS et CSS1. Syntaxe :CSS : Utilise une syntaxe simple basée sur des sélecteurs et des propriétés.SASS : Propose une syntaxe étendue avec des fonctionnalités telles que les...
Sass
768 vues
Déclaration de fonctions
Les fonctions en PHP sont des blocs de code réutilisables qui effectuent une tâche spécifique. Elles permettent d'organiser le code en le divisant en tâches plus petites et plus gérables. Voici...
PHP
753 vues
Médias queries : rendre les pages Web réactives en fonction de la taille de l'écran
Media Queries : Rendre les Pages Web Réactives en Fonction de la Taille de l'ÉcranLes Media Queries sont une fonctionnalité de CSS qui permettent d'appliquer des styles en fonction des...
CSS
20 541 vues
Créer un profil PHP
Après avoir créé notre page de connexion et notre page d'inscription il est temps de créer un profil pour votre utilisateur !La page profil permettra plusieurs choses ! D'éditer ses informations...
Créer son site
Publicité
Cette pub permet au site de vivre ...