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.

748 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
4 665 vues
Différencier HTML (structure) de CSS (présentation)
Différencier HTML (structure) de CSS (présentation)HTML (HyperText Markup Language) et CSS (Cascading Style Sheets) sont deux langages complémentaires utilisés pour créer des sites Web, mais ils...
CSS
1 054 vues
Utilisation de async/await
Utilisation de async/await en JavaScriptL'async/await est une syntaxe introduite dans ECMAScript 2017 pour simplifier la gestion des promesses et rendre le code asynchrone plus lisible et plus...
JS
5 606 vues
Comment débute-t-on ?
Maintenant que vous savez qu'elles sont les différents langages web à utiliser pour développer un site, vous devez certainement vous demander "Alors, comment développe-t-on un site...
Créer son site
3 236 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
2 173 vues
Mixins : Créer des mixins pour réutiliser des blocs de styles
Mixins en SASS : Créer et Utiliser1. Déclaration de mixins :En SASS, les mixins sont déclarés à l'aide du mot-clé @mixin, suivi du nom du mixin et des paramètres entre parenthèses. Les styles...
Sass
805 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 254 vues
Afficher les messages dans l'ordre
Dans cette vidéo on va personnaliser (un peu) l'interface des conversations avec du CSS.Nous allons également remettre les messages dans l'ordre et lors de la réception du message par le...
Créer son site de rencontres
4 737 vues
Ajouter des commentaires
Poster des commentaires sur vos articlesNous allons reprendre la page voir_article.php afin d'ajouter un formulaire qui permettra d'écrire un commentaire pour participer à...
Créer son site
Publicité
Cette pub permet au site de vivre ...