Les Promesses en JavaScript


Les promesses sont un mécanisme de gestion asynchrone en JavaScript qui permet de gérer plus facilement les opérations asynchrones et d'éviter le "callback hell". Les promesses représentent la réussite ou l'échec d'une opération asynchrone et permettent d'attacher des callbacks pour traiter le résultat ou l'erreur lorsque l'opération est terminée.


1. Création d'une Promesse :


Pour créer une promesse, vous utilisez le constructeur Promise. Ce constructeur prend une fonction callback en argument, qui reçoit deux arguments : resolve et reject. resolve est appelé lorsque l'opération réussit, et reject est appelé lorsque l'opération échoue.


Exemple de Création d'une Promesse :


let maPromesse = new Promise(function(resolve, reject) {
    // Opération asynchrone (simulation avec setTimeout)
    setTimeout(function() {
        // Succès de l'opération
        resolve('Résultat réussi');
        
        // Échec de l'opération
        // reject('Erreur survenue');
    }, 2000);
});


2. Utilisation des Promesses :


Une fois qu'une promesse est créée, vous pouvez attacher des callbacks pour traiter le résultat ou l'erreur à l'aide des méthodes .then() et .catch(). La méthode .then() est utilisée pour traiter le succès de la promesse, tandis que la méthode .catch() est utilisée pour traiter l'échec.


Exemple d'Utilisation d'une Promesse :


maPromesse.then(function(resultat) {
    console.log('Opération réussie : ' + resultat);
}).catch(function(erreur) {
    console.error('Erreur survenue : ' + erreur);
});


3. Chaînage de Promesses :


Les promesses peuvent être chaînées pour exécuter des opérations asynchrones séquentiellement ou en parallèle. Chaque .then() retourne une nouvelle promesse, ce qui permet de chaîner des appels .then() les uns après les autres.


Exemple de Chaînage de Promesses :


maPromesse.then(function(resultat) {
    console.log('Première opération réussie : ' + resultat);
    return 'Nouvelle donnée';
}).then(function(nouveauResultat) {
    console.log('Deuxième opération réussie : ' + nouveauResultat);
}).catch(function(erreur) {
    console.error('Erreur survenue : ' + erreur);
});


4. Promesses en Parallèle :


Vous pouvez également utiliser Promise.all() pour exécuter plusieurs promesses en parallèle et attendre qu'elles se terminent toutes avant de traiter les résultats.


Exemple de Promesses en Parallèle :


let promesse1 = fetch('https://api.example.com/data1');
let promesse2 = fetch('https://api.example.com/data2');

Promise.all([promesse1, promesse2])
    .then(function(resultats) {
        // Traitement des résultats
    })
    .catch(function(erreur) {
        console.error('Erreur survenue : ' + erreur);
    });


5. Utilisation de Promises.resolve() et Promise.reject() :


Vous pouvez également créer des promesses résolues ou rejetées immédiatement en utilisant Promise.resolve() et Promise.reject().


Exemple :


let promesseResolue = Promise.resolve('Résultat immédiat');
let promesseRejetee = Promise.reject('Erreur immédiate');


En résumé, les promesses en JavaScript offrent une manière plus propre et plus intuitive de gérer les opérations asynchrones. En comprenant comment créer des promesses, les chaîner, les utiliser en parallèle et les gérer avec les méthodes .then() et .catch(), vous pouvez écrire un code asynchrone plus clair et plus maintenable.

709 vues
Posté le 15 mai 2024
Publicité Sitedudev
Cette pub permet au site de vivre ...
Publicité
Cette pub permet au site de vivre ...
Voir d'autres articles
1 334 vues
Grid : organiser les éléments dans un système de grille
Grid : Organiser les Éléments dans un Système de GrilleCSS Grid est une méthode de disposition en CSS qui permet de créer des systèmes de grille complexes pour organiser les éléments sur une...
CSS
852 vues
Fonctions anonymes et fonctions fléchées
Fonctions Anonymes et Fonctions Fléchées en JavaScript1. Fonctions Anonymes :Une fonction anonyme est une fonction définie sans nom. Elles sont souvent utilisées comme fonctions de rappel...
JS
823 vues
Sélecteurs d'attribut : styliser en fonction des attributs des éléments HTML
Sélecteurs d'Attribut : Styliser en fonction des attributs des éléments HTMLLes sélecteurs d'attribut en CSS permettent de cibler des éléments HTML en fonction de la présence ou de la valeur...
CSS
1 065 vues
Variables : déclaration, types de données (chaînes de caractères, nombres entiers et flottants, booléens)
Les variables sont des éléments fondamentaux en programmation, utilisées pour stocker des données et leur attribuer des noms. En PHP, les variables peuvent stocker différents types de données,...
PHP
3 703 vues
Afficher ses utilisateurs en PHP
Maintenant que nous avons créé notre formulaire d’inscription et de connexion nous allons afficher tous nos utilisateurs du site afin de visiter par la suite les autres profils du site.
Créer son site de rencontres
1 096 vues
Utilisation de styles en ligne avec l'attribut style
Utilisation de styles en ligne avec l'attribut styleL'attribut style permet de définir des styles CSS directement à l'intérieur des balises HTML. Cela permet d'appliquer des styles spécifiques à...
HTML
1 690 vues
Sélecteurs d'ID : appliquer des styles à des éléments individuels
Sélecteurs d'ID : Appliquer des styles à des éléments individuelsLes sélecteurs d'ID sont des outils en CSS qui permettent d'appliquer des styles à des éléments HTML spécifiques....
CSS
1 270 vues
Comprendre le rôle de JavaScript dans le développement web
Le rôle de JavaScript dans le développement webJavaScript est un langage de programmation qui joue un rôle crucial dans le développement web moderne. Il est largement utilisé pour rendre les...
JS
Publicité
Cette pub permet au site de vivre ...