在JavaScript中解释Promise.any()与async-await

我们将在本教程中学习诺言的any()方法。在JavaScript中，我们可以使用承诺来处理异步请求。在我们的应用程序中编写异步代码来获取数据，可以使其更快，因为它执行其他代码时不需要等待数据。

Promise.any()方法

正如any()方法的名字所示，它将执行任何已完成的承诺。因此，无论哪个承诺首先解决，都会被promise.any()方法执行，而其他承诺可能被执行也可能不被执行。另外，所有被拒绝的承诺都不会被promise.any()方法执行。

语法

用户可以按照下面的语法来使用promise.any()方法。

Promise.any(Array_of_promise).then(
   // handle result
)

在上面的语法中，我们可以在’then’块中处理任何承诺所返回的结果。

参数

Array_of_promise – 它包含了多个承诺，哪一个会被快速解决，就由any()方法执行。

使用Async-await的Promise.any()

JavaScript中的async和await关键字是用来处理异步代码的。async用在一个函数定义之前，表示该函数是异步的，并将返回一个承诺。await在一个异步函数中使用，用于暂停执行，直到指定的承诺被实现。

语法

以下是在JavaScript中使用Promise.any()方法和async-await的语法。

async function example() {
   try {
      const result = await Promise.any([promise1, promise2, ...]);
   } catch (error) {
      // handle error
   }
}

这里，promise1 ，promise2 ，等等是你想等待的承诺。Promise.any方法返回一个承诺，该承诺被解析为第一个被解析的输入承诺的值，如果所有的输入承诺都被拒绝，则被拒绝的承诺为一个所有输入承诺的数组。

示例 1

在下面的例子中，我们使用Promise()构造函数创建了不同的承诺。我们拒绝了promise_2并解决了其他的承诺，我们在两毫秒后解决了promise_3。所以，promise_1将首先成功执行。

在输出中，我们可以观察到，any()方法打印了promise_1的结果，因为它将被提前解决。

<html>
<body>
   <h2> Using the Promise.any() Method </h2>
   <div id="output"> </div>
   <script>
      let promise_1 = new Promise((res, rej) => {
         res("Resolved promise with time of 0 milliseconds");
      });
      let promise_2 = new Promise((res, rej) =>
      rej("This promise is rejected!")
      );
      let promise_3 = new Promise((res, rej) => {
         setTimeout(() => {
            res("Resolved promise with time of 2000 milliseconds");
         }, 2000);
      });
      // resolving the promises
      Promise.any([promise_1, promise_2, promise_3]).then((response) => {
         document.getElementById("output").innerHTML += response;
      });
   </script>
</body>
</html>

示例 2

在下面的例子中，我们已经创建了异步函数getData()。在这里，我们创建了多个承诺的数组，并使用fetch()方法创建了承诺。

我们正在从实时API中获取数据。请求数组包含三个承诺，但在输出中，我们可以观察到结果不是一个可迭代的对象，只包含早期解决的承诺中的响应。

<html>
<body>
   <h2>Using Promise.any() with async-await </h2>
   <button onclick="getData()"> Fetch any one promise Data </button>
   <div id="output"> </div>
   <script>
      async function getData() {
         try {
            // multiple promises
            const requests = [
               fetch("https://jsonplaceholder.typicode.com/todos/1"),
               fetch("https://jsonplaceholder.typicode.com/todos/2"),
               fetch("https://jsonplaceholder.typicode.com/todos/3"),
            ];
            const result = await Promise.any(requests);
            document.getElementById("output").innerHTML =
            "The status of result is " + result.status;
         } 
         catch (error) {
            document.getElementById("output").innerHTML = error;
         }
      }
   </script>
</body>
</html>

在这个例子中，getData函数使用Promise.any()来创建一个Promise，该Promise由三个要履行的fetch Promises中的第一个履行。然后，该函数使用await关键字来等待Promise的实现，并记录响应文本。如果任何一个Promise被拒绝，catch块将被执行并将错误记录到控制台。

将Promise.any()与async和await一起使用，可以成为一种有用的方式，以简明和可读的方式处理多个Promise。它允许你指定一组承诺，并处理第一个被履行的承诺，而忽略其他的。

我们在本教程中学习了如何使用any()承诺方法。使用any()方法的目的是为了执行已解决的承诺中的唯一方法。