在JavaScript中用async-await解释Promise.all

简单的操作，如两个数字相加或字符串操作代码在JavaScript中顺序执行并立即返回结果。但在为现实世界的应用编码时，我们经常对数据库、API和其他应用进行耗时的调用。这些较长的调用不会立即返回结果，而是会返回一个承诺。

诺言是一个代表异步操作的未来结果的对象。它被用来处理异步进程的最终成功或失败。例如，如果你在JavaScript中从一个API中请求一些对象，你将得到一个承诺，该任务最终将完成或失败。一段时间后，你会得到承诺的结果，无论它是被完成还是被拒绝。

Promise.all()

Promise.all()是一个将多个承诺作为输入并返回单个承诺的方法。
许诺在处理JavaScript中进程的异步性方面很有效。
如果所有输入的承诺都无异议地得到履行，那么结果将是一个由输入的承诺的结果值的数组组成的单一承诺。
如果输入的任何一个承诺被拒绝，那么我们会得到一个立即被拒绝的承诺，其原因在承诺拒绝中提到。它不会给我们其余的成功或解决的承诺的结果。
由于承诺的结果是一个可迭代的数组，我们可以运行循环并相应地执行需要的操作。

语法

用户可以使用以下语法在JavaScript中使用Promise.all()。

Promise.all([promise1, promise2, promise3, ….])

Promise.all()接受一个数组iterable作为输入。输入的数组可以接受所有的承诺或对象。

异步-等待

async关键字用于声明一个异步函数，而 “await “关键字可以在该函数的主体中使用。async和await关键字共同显示了异步过程的行为，代码更简洁。

一般来说，异步函数会有任意数量的await语句或没有await语句。与try-catch块相比，async-await关键字给出的代码更简洁。async关键字使JavaScript函数返回一个承诺，而 “await “关键字用于等待一个承诺。

语法

async function function_name{
   let result = await (value);
   . . . . . . .
   . . . . . . .
}

我们现在已经知道了promise.all()和async-await这两个关键字。让我们来看看Async-await和promise.all()在JavaScript中的用法。

含有async-await的Promise.all

在JavaScript中使用Promise.all方法与async-await的语法如下。

语法

在JavaScript中使用Promise.all方法和async-await的语法如下

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

这里promise1 ，promise2 ，等等是你想等待的承诺。Promise.all方法返回一个承诺，如果所有的输入承诺都被履行了，那么这个承诺将以一个包含所有输入承诺的值的数组被履行。如果任何一个输入的承诺被拒绝，则Promise.all承诺被拒绝，并说明第一个被拒绝的承诺的原因。

异步函数的例子使用try/catch语句来处理错误情况，如果任何输入承诺被拒绝，catch块将被执行。

示例 1

让我们以Instagram这样的社交媒体平台为例。在Instagram上可以进行某些操作，包括喜欢、评论和分享。因此，让我们为喜欢、评论和分享的操作创建三个承诺。从其他函数中，让我们使用 promise.all() 以及 async 和 await 关键字来访问这些承诺。

<html>
<body>
   <h2> Using the <i> Promise.all() </i> Method</h2>
   <p id="output"> </p>
   <script>
      let like_promise = () => {
         return new Promise((resolve, reject) => {
            resolve("Liked ");
         });
      };
      let comment_promise = () => {
         return new Promise((resolve, reject) => {
            resolve("commented ");
         });
      };
      let share_promise = () => {
         return new Promise((resolve, reject) => {
            resolve("shared ");
         });
      };
      let main_promise = async () => {
         let result = await Promise.all([like_promise(), comment_promise(), share_promise(), ]);
         document.getElementById("output").innerHTML = result
      };
      main_promise();
   </script>
</body>
</html>

让我们看看一个承诺被拒绝的例子，如果我们考虑一个博客发布到网站的场景。发布的三种情况是：博客文章、正在进行中的博客和已删除的博客。让我们拒绝博客删除情况下的承诺，并观察其输出。

下面是用JavaScript创建这个例子的步骤。

第1步 – 在JavaScript中创建一个post函数，它应该返回一个已解决的承诺。
第2步 – 在JavaScript中创建一个进度函数，它也应该返回一个被接受的承诺。
第3步 – 在JavaScript中创建一个del函数，在调用时拒绝承诺。
第4步 – 在JavaScript中创建一个异步函数，通过await关键字使用promise.all()等待所有的承诺。当函数del从promise.all()中被调用时，输出是一个错误，其拒绝信息为 “post deleted”。

示例 2

<html>
   <h2> Using the Promise.all() Method with async-await</h2>
<body>
   <p id="output"> </p>
   <script>
      let post = () => {
         return new Promise((resolve, reject) => {
            resolve("blog posted");
         });
      };
      let progress = () => {
         return new Promise((resolve, reject) => {
            resolve("blog in progress");
         })
      };
      let del = () => {
         return new Promise((resolve, reject) => {
            reject("rejected promise");
         });
      };
      let blog_promise = async () => {
         try {
            let result = await Promise.all([progress(), post(), del()]);
            document.getElementById("output").innerHTML = result
         } catch (error) {
            document.getElementById("output").innerHTML = error
         }
      }
      blog_promise();
   </script>
</body>
</html>

我们已经学会了在JavaScript中使用promise.all()和async-await关键字的工作。除了它们的用途外，本教程还讨论了两个实际案例，一个是关于所有承诺的实现，另一个是关于拒绝承诺的问题。