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.

563 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 223 vues
CSS externe : l'utilisation de fichiers CSS séparés pour styliser plusieurs pages HTML
CSS Externe : L'utilisation de fichiers CSS séparés pour styliser plusieurs pages HTMLLe CSS externe est une méthode de stylisation où les styles sont définis dans des fichiers CSS distincts et...
CSS
563 vues
Les promesses
Les Promesses en JavaScriptLes 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...
JS
1 433 vues
Inline CSS : l'ajout de styles directement dans les balises HTML
Inline CSS : L'ajout de styles directement dans les balises HTMLL'Inline CSS est une méthode de stylisation où les styles sont appliqués directement à un élément HTML via l'attribut style. Cela...
CSS
5 271 vues
Comprendre ce qu'est SASS et pourquoi il est utilisé
Qu'est-ce que SASS ?SASS, qui signifie Syntactically Awesome Style Sheets, est un préprocesseur CSS. Cela signifie qu'il s'agit d'un outil qui permet d'écrire du code CSS de manière plus efficace...
Sass
696 vues
Utilisation de gradients, ombres et transitions pour des effets visuels
Utilisation de Gradients, Ombres et Transitions pour des Effets VisuelsEn CSS, vous pouvez utiliser des gradients, des ombres et des transitions pour ajouter des effets visuels attrayants à vos...
CSS
615 vues
Modification du contenu et des styles
Modification du Contenu et des Styles des Éléments HTML en JavaScriptLa modification du contenu et des styles des éléments HTML est une tâche courante en développement web. Cela permet de...
JS
1 359 vues
Gestion des événements : click, submit, keydown, etc.
Gestion des Événements en JavaScriptLa gestion des événements en JavaScript permet d'interagir avec les actions de l'utilisateur sur une page web, telles que les clics de souris, les soumissions...
JS
816 vues
Qu'est-ce que PHP ?
Introduction à PHPPHP, acronyme de "Hypertext Preprocessor", est un langage de programmation côté serveur très populaire, principalement utilisé pour développer des sites Web dynamiques et...
PHP
Publicité
Cette pub permet au site de vivre ...