Comprendre les promesses de JavaScript : guide du débutant

JavaScript est un langage puissant largement utilisé pour le développement Web, et l'un des concepts essentiels à comprendre dans le JavaScript moderne est celui des promesses. Si vous avez déjà eu du mal avec du code asynchrone, des rappels ou si vous souhaitez simplement écrire du code plus propre et plus lisible, il est indispensable de comprendre Promises. Dans cet article, nous verrons ce que sont les promesses, comment elles fonctionnent et comment vous pouvez les utiliser pour gérer plus efficacement les opérations asynchrones.

Que sont les promesses ?

En JavaScript, une promesse est un objet qui représente l'achèvement (ou l'échec) éventuel d'une opération asynchrone et sa valeur résultante. C'est comme un espace réservé pour une valeur future qui sera résolue une fois l'opération terminée.

Les promesses constituent une amélioration significative par rapport au code asynchrone traditionnel basé sur le rappel, souvent appelé « l'enfer du rappel » en raison de sa structure profondément imbriquée et de sa difficulté à gérer.

Comment fonctionnent les promesses ?

Une promesse peut être dans l'un des trois états suivants :

1. En attente : l'état initial dans lequel la promesse n'est ni remplie ni rejetée.
2. Réalisé : l'état dans lequel l'opération est terminée avec succès et la promesse est résolue avec une valeur.
3. Rejeté : l'état dans lequel l'opération échoue et la promesse est rejetée avec une raison (une erreur, par exemple).

let myPromise = new Promise((resolve, reject) => {
    let success = true; // Simulating an operation

    if (success) {
        resolve("The operation was successful!");
    } else {
        reject("The operation failed.");
    }
});

myPromise.then((message) => {
    console.log(message); // This will run if the Promise is fulfilled
}).catch((error) => {
    console.error(error); // This will run if the Promise is rejected
});

Dans l'exemple ci-dessus, "myPromise" sera résolu si la variable "success" est "true" et "reject" si elle est "false". La méthode ".then()" est utilisée pour gérer l'état rempli et ".catch()" est utilisée pour gérer les erreurs.

Enchaîner les promesses

L'une des fonctionnalités les plus puissantes de Promises est que vous pouvez les enchaîner. Cela vous permet d'effectuer plusieurs opérations asynchrones en séquence sans tomber dans l'enfer des rappels.

myPromise
    .then((message) => {
        console.log(message);
        return new Promise((resolve, reject) => {
            resolve("Another operation completed!");
        });
    })
    .then((newMessage) => {
        console.log(newMessage);
    })
    .catch((error) => {
        console.error(error);
    });

Dans cet exemple, le deuxième ".then()" s'exécute après que la première promesse soit remplie, permettant un flux fluide et lisible d'opérations asynchrones.

Gérer plusieurs promesses

Parfois, vous devez attendre la fin de plusieurs opérations asynchrones. C'est là que "Promise.all()" et "Promise.race()" sont utiles.

Promesse.all()

Cette méthode prend un tableau de promesses et renvoie une seule promesse qui se résout lorsque toutes les promesses du tableau sont résolues, ou est rejetée si l'une des promesses est rejetée.

let promise1 = Promise.resolve("First operation");
let promise2 = Promise.resolve("Second operation");

Promise.all([promise1, promise2]).then((values) => {
    console.log(values); // ["First operation", "Second operation"]
});

Promesse.race()

Promise.race() prend également un tableau de promesses, mais il renvoie une promesse qui se résout ou se rejette dès que l'une des promesses du tableau est résolue ou rejetée.

let promise1 = new Promise((resolve) => setTimeout(resolve, 500, "First operation"));
let promise2 = new Promise((resolve) => setTimeout(resolve, 100, "Second operation"));

Promise.race([promise1, promise2]).then((value) => {
    console.log(value); // "Second operation"
});

Conclusion

Les promesses sont devenues la pierre angulaire de la programmation asynchrone en JavaScript, permettant aux développeurs d'écrire du code plus propre et plus gérable. En comprenant comment créer, enchaîner et gérer plusieurs promesses, vous serez sur la bonne voie pour maîtriser le JavaScript asynchrone.

Si vous débutez avec Promises, j’espère que ce guide vous aidera à démarrer. Au fur et à mesure que vous vous entraînerez davantage, vous découvrirez que Promises est un outil inestimable dans votre boîte à outils JavaScript.

N'hésitez pas à partager vos réflexions ou à poser des questions dans les commentaires. Connectons les gars et construisons une communauté forte.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!