Types de promesses en JavaScript

Pardonnez-moi pour les fautes de frappe et de grammaire, j'apprends encore. ?

Que sont les promesses ?

Les promesses sont un moyen de gérer les opérations asynchrones en JavaScript. Ils représentent une valeur qui peut être disponible maintenant, ou dans le futur, ou jamais. Les promesses ont trois états : en attente, remplies et rejetées.

Types de promesses

1. En attente : L'état initial d'une promesse. Cela signifie que l'opération est toujours en cours et n'est pas encore terminée.

2. Réalisé : L'état d'une promesse lorsque l'opération a été terminée avec succès. La promesse a une valeur et elle peut être utilisée.

3. Rejeté : L'état d'une promesse lorsque l'opération a échoué. La promesse a une raison pour l'échec, et elle peut être gérée à l'aide de la méthode catch.

Pourquoi les promesses sont importantes ?

• Promet d'aider à écrire du code asynchrone plus propre et plus lisible.
• Ils offrent un moyen de gérer les opérations asynchrones de manière plus structurée.
• Les promesses peuvent être enchaînées pour effectuer plusieurs opérations asynchrones de manière séquentielle.
• Qu'il s'agisse de récupérer des données, de gérer plusieurs tâches ou de courir pour un résultat rapide, les promesses sont essentielles dans le JavaScript moderne.

1. Promesse simple

const promise = new Promise((resolve, reject) => {
    // Imagine fetching user data from an API
    const user = {
        name: "Aasim Ashraf",
        age: 21,
    };

    user ? resolve(user) : reject("User not found");
});

promise
    .then((user) => console.log(user))
    .catch((error) => console.log(error));

Une promesse qui résout ou rejette souvent utilisée pour les appels d'API ou les tâches asynchrones.

• Quand utiliser : Pour une opération asynchrone unique comme la récupération de données à partir d'une API.
• Avantages : Gestion propre du succès et de l'échec en un seul bloc.

2. Promesse de toutes les opérations multiples

const fetchUser = fetch("/users").then((res) => res.json());
const fetchPosts = fetch("/posts").then((res) => res.json());

Promise.all([fetchUser, fetchPosts])
    .then(([user, posts]) => {
        console.log(user, posts);
    })
    .catch((error) => console.log(error));

Attend que toutes les promesses se résolvent, si l'une d'elles échoue, toute la chaîne échoue. Idéal pour plusieurs tâches asynchrones qui doivent être résolues ensemble.

• Quand utiliser : Pour plusieurs opérations asynchrones qui ne dépendent pas les unes des autres.
• Avantages : Récupérez plusieurs données à la fois et gérez-les ensemble.
• Inconvénients : Si un échoue, tous échouent.

Que se passe-t-il si une promesse échoue dans Promise.all ?

const fetchUser = fetch("/users").then((res) => res.json());
const fetchPosts = fetch("/posts").then((res) => res.json());

Promise.all([fetchUser, fetchPosts])
    .then(([user, posts]) => {
        console.log(user, posts);
    })
    .catch((error) => console.log(error));

Le problème avec Promise.all est que si une promesse échoue, toute la chaîne échoue. Pour éviter cela, vous pouvez utiliser Promise.allSettled.

3. Promesse.allSettled

const fetchUser = fetch("/users").then((res) => res.json());
const fetchPosts = fetch("/posts").then((res) => res.json());

Promise.allSettled([fetchUser, fetchPosts])
    .then((results) => {
        results.forEach((result) => {
            if (result.status === "fulfilled") {
                console.log("User Data:", result.value);
            } else {
                console.log("Error:", result.reason);
            }
        });
    });

Promise.allSettled attend que toutes les promesses soient réglées, qu'elles soient résolues ou rejetées. Il renvoie un tableau d'objets avec un statut et une valeur ou une raison.

• Quand utiliser :Quand on veut connaître tous les résultats, même les échecs.
• Avantages : Récupérez plusieurs données à la fois et gérez-les ensemble.
• Inconvénients : Si on échoue, ça n'arrêtera pas la chaîne

4. Résultat le plus rapide de Promise.race

const fast = new Promise(resolve => setTimeout(resolve, 1000, "Fast"));

const slow = new Promise(resolve => setTimeout(resolve, 2000, "Slow"));

Promise.race([fast, slow])
    .then((result) => {
        console.log(result);
    })
    .catch((error) => console.log(error));

Renvoie le résultat de la première promesse de règlement, qu'elle soit résolue ou rejetée. Utile lorsque vous avez besoin de rapidité, comme par exemple pour charger la première réponse disponible.

• Quand utiliser :Quand la vitesse compte plus que l'attente de tous les résultats.
• Limite : Vous pouvez obtenir une erreur si la promesse la plus rapide échoue.

Que se passe-t-il si une promesse dans Promise.race échoue ?

const error = new Promise((resolve) => {
    setTimeout(() => resolve("Error"), 1000);
});

const success = new Promise((resolve) => {
    setTimeout(() => resolve("Success"), 2000);
});

Promise.race([error, success])
    .then((result) => {
        console.log(result);
    })
    .catch((error) => console.log("First Rejected",error));

Si la première promesse échoue, toute la chaîne échoue. Pour éviter cela, vous pouvez utiliser Promise.any.

5. Promettez tout premier résultat réussi

const promise1 = Promise.reject("Error 1");
const promise2 = new Promise(resolve => setTimeout(resolve, 3000, "Promise 2"));

Promise.any([promise1, promise2])
    .then((result) => {
        console.log("First Success",result);
    })
    .catch((error) => console.log("All Rejected",error));

Résout lorsqu'une promesse est résolue. Ignore tous les rejets jusqu'à ce que toutes les promesses soient rejetées. Utile lorsque vous avez besoin du premier résultat réussi, quel que soit le reste.

• Quand utiliser : Lorsque vous avez besoin du premier résultat réussi, quel que soit le reste des promesses.
• Limite : Si toutes les promesses sont rejetées, une erreur sera générée.

Résumer

• Promesse simple : Pour une opération asynchrone unique comme la récupération de données à partir d'une API.
• Promise.all : Pour plusieurs opérations asynchrones qui ne dépendent pas les unes des autres.
• Promise.allSettled :Quand vous voulez connaître tous les résultats, même les échecs.
• Promise.race :Quand la vitesse compte plus que l'attente de tous les résultats.
• Promise.any : Lorsque vous avez besoin du premier résultat réussi, quel que soit le reste des promesses.

Pensées finales

• Choisir le bon type de promesse est la clé d'une programmation asynchrone efficace.
• Utilisez la promesse qui correspond le mieux à votre cas d'utilisation : rapidité, opérations multiples ou gestion de tous les résultats.

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!