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.

245 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
2 878 vues
Comment faire connaitre son site ?
L'un des derniers points qui n'est pas sans conséquence est la promotion de son site après l'avoir mis en ligne sur un hébergeur (OVH, 1and1, Hostinger, etc.).L'une des questions que...
Créer son site
54 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
399 vues
Emplacement du Fichier .htaccess
L'emplacement où vous placez votre fichier .htaccess est crucial pour qu'il fonctionne correctement sur votre site web. Dans ce cours, nous allons apprendre où placer le fichier .htaccess pour...
HTACCESS
15 289 vues
Connexion PHP
Après avoir créé notre formulaire d'inscription il nous faut créer un formulaire de connexion afin que nos futurs utilisateurs puissent se connecter au site une fois...
Créer son site
176 vues
Vue d'ensemble de frameworks populaires comme React, Angular, et Vue.js
Vue d'ensemble des Frameworks Populaires : React, Angular et Vue.jsLes frameworks JavaScript tels que React, Angular et Vue.js sont largement utilisés pour le développement d'applications web...
JS
2 544 vues
Supprimer un ami
Nous allons repartir sur notre page voir_profil.php afin de compléter le code ci-dessous.<form method="post">   <?php     if(!isset($relation['id'])){   ?>  ...
Créer son site
1 432 vues
Voir plus de messages (1/2)
Dans cette nouvelle vidéo nous allons ajouter un bouton 'voir plus' qui va nous permettre de voir d'anciens messages. Nous allons commencer par mettre en place le bouton suivi du procédé pour voir...
Créer son site de rencontres
656 vues
Syntaxe de base : balises PHP, commentaires
Introduction à la syntaxe de base en PHPPHP utilise une syntaxe simple et flexible pour écrire du code côté serveur. Commençons par explorer les balises PHP et les commentaires, deux éléments...
PHP
Publicité
Cette pub permet au site de vivre ...