Utilisation des méthodes Promise.all() et Promise.allSettled() en JavaScript

Ce tutoriel vous apprendra à utiliser Promise wait en JavaScript.

Dans ce tutoriel, je vais vous apprendre les méthodes Promise.all() 和 Promise.allSettled() et comment les utiliser pour gérer plusieurs promesses.

Utilisez la Promise.all() méthode

Promise 对象具有三个有用的方法，名为 then()、catch() 和 finally(), vous pouvez les utiliser pour exécuter des méthodes de rappel une fois la promesse terminée. p> La méthode

Promise.all() 方法是一个静态方法，这意味着它属于整个类，而不是绑定到该类的任何特定实例。它接受可迭代的 Promise 作为输入并返回单个 Promise est une méthode statique, ce qui signifie qu'elle appartient à la classe entière et n'est liée à aucune instance spécifique de la classe. Il accepte un itérable de Promises en entrée et renvoie un seul objet Promise.

Comme je l'ai mentionné précédemment, la méthode Promise.all() renvoie une nouvelle promesse. Si toutes les promesses transmises à cette méthode ont été résolues avec succès, cette nouvelle promesse sera résolue en un tableau de valeurs de promesse déterminées. Une fois qu’une des promesses passées est rejetée, cette nouvelle promesse sera également rejetée.

Toutes les promesses sont résolues avec succès

Voici un exemple de méthode Promise.all() où toutes les promesses sont résolues avec succès :

const promise_a = new Promise((resolve) => {
  setTimeout(() => {
    resolve('Loaded Textures');
  }, 3000);
});

const promise_b = new Promise((resolve) => {
    setTimeout(() => {
      resolve('Loaded Music');
    }, 2000);
});

const promise_c = new Promise((resolve) => {
    setTimeout(() => {
      resolve('Loaded Dialogues');
    }, 4000);
});


const promises = [
  promise_a, promise_b, promise_c
];

console.log('Hello, Promises!');

Promise.all(promises).then((values) => {
  console.log(values);
  console.log('Start the Game!');
});

/* Output

19:32:06 Hello, Promises!
19:32:10 Array(3) [ "Loaded Textures", "Loaded Music", "Loaded Dialogues" ]
19:32:10 Start the Game!

*/

Notre déclaration avant d'appeler la méthode Promise.all() 方法之前的语句记录于 19:32:06。此外，我们的第三个 Promise 名为 promise_c 需要最长的时间才能解决，并在 4 秒后解决。这意味着调用 all() 方法返回的 Promise 也应该需要 4 秒才能解析。我们可以通过将回调函数传递给 then() a été enregistrée à 19:32:06. De plus, notre troisième promesse nommée promise_c prend le plus de temps à être résolue, après 4 secondes. Cela signifie que la promesse renvoyée en appelant la méthode all() devrait également prendre 4 secondes pour être résolue. Nous pouvons vérifier si la résolution prend 4 secondes en passant la fonction de rappel à la méthode then().

Une autre chose importante à noter ici est que le tableau renvoyé de valeurs complétées contient les valeurs dans le même ordre dans lequel nous avons transmis la promesse à la méthode Promise.all() 方法的顺序相同。名为 promise_b 的 Promise 解析速度最快，只需 2 秒。但是，其解析值仍然位于返回数组中的第二个位置。这与我们将 Promise 传递给 Promise.all(). La promesse nommée promise_b est la plus rapide à résoudre, ne prenant que 2 secondes. Cependant, sa valeur analysée se trouve toujours à la deuxième position dans le tableau renvoyé. Cela correspond à l'endroit où nous transmettons la promesse à la méthode

.

Ce maintien de l'ordre peut s'avérer très utile dans certaines situations. Par exemple, disons que vous utilisez dix promesses différentes pour obtenir des informations météorologiques sur dix villes différentes. Tous ces problèmes ne seront pas résolus simultanément et il est impossible de savoir à l’avance dans quel ordre ils seront résolus. Cependant, si vous savez que les données sont renvoyées dans l'ordre dans lequel la promesse a été transmise, vous pourrez les allouer correctement pour des opérations ultérieures.

Une promesse rejetée

Voici un exemple d'une des promesses rejetées :

const promise_a = new Promise((resolve) => {
  setTimeout(() => {
    resolve('Loaded Textures');
  }, 3000);
});

const promise_b = new Promise((resolve, reject) => {
    setTimeout(() => {
      reject(new Error('Could Not Load Music'));
    }, 2000);
});

const promise_c = new Promise((resolve) => {
    setTimeout(() => {
      resolve('Loaded Dialogues');
    }, 4000);
});


const promises = [
  promise_a, promise_b, promise_c
];

console.log('Hello, Promises!');

Promise.all(promises).catch((error) => {
  console.error(error.message);
  console.log('Stop the Game!');
});

/* Output

20:03:43 Hello, Promises!
20:03:45 Could Not Load Music
20:03:45 Stop the Game!

*/

all() 方法之前的语句记录于 20:03:43。然而，我们的第二个承诺 promise_b 这次以拒绝告终。我们可以看到 promise_b 在 2 秒后被拒绝。这意味着 all() 方法返回的 Promise 也应该在 2 秒后拒绝，并出现与我们的 promise_bDe même, nous recevons la même erreur en appelant

. Il ressort clairement du résultat que c’est exactement ce qui se passe.

awaitUtiliser avec

mot-clé

await 关键字用于等待承诺解决，然后再继续下一步。我们还知道 all() 方法返回一个承诺。这意味着我们可以使用 await 以及对 Promise.all()Vous savez probablement déjà que le mot-clé

est utilisé pour attendre qu'une promesse soit résolue avant de passer à l'étape suivante. Nous savons également que la méthode all() renvoie une promesse. Cela signifie que nous pouvons utiliser

avec les appels à la méthode await.

La seule chose à retenir est que puisque create_promise() 的函数，它根据提供的数据和持续时间为我们创建承诺。我们的异步 result_from_promises() 函数使用 await n'est valable que dans les fonctions et modules asynchrones, nous devons envelopper le code dans une fonction asynchrone comme ceci :

function create_promise(data, duration) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(data);
    }, duration);
  });
}

const promise_a = create_promise("Loaded Textures", 3000);
const promise_b = create_promise("Loaded Music", 2000);
const promise_c = create_promise("Loaded Dialogue", 4000);

const my_promises = [promise_a, promise_b, promise_c];

async function result_from_promises(promises) {
  let loading_status = await Promise.all(promises);
  console.log(loading_status);
}

result_from_promises(my_promises);

/* Outputs

08:50:43 Hello, Promises!
08:50:47 Array(3) [ "Loaded Textures", "Loaded Music", "Loaded Dialogue" ]

*/

Cette fois, nous définissons une fonction appelée create_promise() qui crée une promesse pour nous en fonction des données et de la durée fournies. Notre fonction asynchrone result_from_promises() utilise le mot-clé Promise.allSettled() pour attendre la résolution d'une promesse.

Utilisez la Promise.all() méthode

Utiliser la méthode

est logique lorsque vous souhaitez simplement continuer une fois que toutes les promesses ont été résolues avec succès. Cela peut être utile, par exemple, lorsque vous chargez des éléments de jeu.

Promise.allSettled()Mais supposons que vous obteniez des informations sur la météo dans différentes villes. Dans ce cas, vous pouvez générer des informations météorologiques pour toutes les villes où l'acquisition de données a réussi et afficher un message d'erreur si l'acquisition de données a échoué.

La méthode 🎜🎜 fonctionne mieux dans ce cas. Cette méthode attend que tous les engagements passés soient résolus via une résolution ou un rejet. La promesse renvoyée par cette méthode contient un tableau d'objets contenant des informations sur le résultat de chaque promesse. 🎜

function create_promise(city) {
  let random_number = Math.random();
  
  let duration = Math.floor(Math.random()*5)*1000;

  return new Promise((resolve, reject) => {
    if (random_number < 0.8) {
      setTimeout(() => {
        resolve(`Show weather in ${city}`);
      }, duration);
    } else {
      setTimeout(() => {
        reject(`Data unavailable for ${city}`);
      }, duration);
    }
  });
}

const promise_a = create_promise("Delhi");
const promise_b = create_promise("London");
const promise_c = create_promise("Sydney");

const my_promises = [create_promise("Delhi"), create_promise("London"), create_promise("Sydney"), create_promise("Rome"), create_promise("Las Vegas")];

async function result_from_promises(promises) {
  let loading_status = await Promise.allSettled(promises);
  console.log(loading_status);
}

result_from_promises(my_promises);

/* Outputs

[
  {
    "status": "fulfilled",
    "value": "Show weather in Delhi"
  },
  {
    "status": "fulfilled",
    "value": "Show weather in London"
  },
  {
    "status": "fulfilled",
    "value": "Show weather in Sydney"
  },
  {
    "status": "rejected",
    "reason": "Data unavailable for Rome"
  },
  {
    "status": "fulfilled",
    "value": "Show weather in Las Vegas"
  }
]

*/

如您所见，数组中的每个对象都包含一个 status 属性，让我们知道承诺是否已实现或被拒绝。在履行承诺的情况下，它包含 value 属性中的解析值。在被拒绝的 Promise 的情况下，它在 reason 属性中包含拒绝的原因。

最终想法

我们了解了 Promise 类的两个有用方法，它们可以让您同时处理多个 Promise。当您想要在其中一个 Promise 被拒绝后立即停止等待其他 Promise 解决时， Promise.all() 方法很有用。当您想要等待所有承诺解决时，无论其解决或拒绝状态如何， Promise.allSettled() 方法非常有用。

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!