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

在本文中，我们将尝试了解如何在 JavaScript 中使用某些预定义的语法轻松地使用 Promise.all() 和 async-await。在我们直接进入我们定义的任务之前，让我们首先快速了解一下与 Promise.all() 和 async-await 相关的基础知识。

Promise.all() ：

• Promise.all() 是一种组合所有用户定义的 Promise 并以数组形式返回单个 Promise 的方法，其中结果是所有 Promise 的顺序组合。
• 如果任何用户不希望以数组的形式打印输出，那么该用户可以在数组上运行任何循环或方法并在控制台中打印值（Promise.all() 返回一个可迭代的对象，它本身就是一个数组.)。
• 与 Promise.all() 相关的一件事是，如果其中一个承诺将输出返回为被拒绝，则它不会给出其他成功执行的承诺的输出。

语法：以下是我们可以用来为几个 Promise 执行 Promise.all() 方法的语法：

Promise.all([ first_promise , second_promise, .......])

示例：以下是伪代码（不可运行的），它将帮助您更多地了解 Promise.all()。

let promise1 = new Promise(()=> resolve(10));
let promise2 = new Promise(()=> resolve(20));

let final_promise = Promise.all([promise1, promise2]);

异步等待：

• Async-await 是我们用来说明作为异步数据接收器的特定函数或方法的两个关键字。
• 使用 async-await 关键字，我们可以轻松地以非常简洁的方式显示和捕获异步的、基于 Promise 的行为。

语法：以下是我们可以用来执行异步方法 async-await 的语法：

let method = async () => {
    let result = await (value);
    .....
}

现在我们已经简要了解了 Promise.all() 和 async-await，现在让我们开始执行使用 async-await 实现 Promise.all() 的任务。

示例 1：在这个示例中，我们将在两个不同的函数（或方法）中创建两个 Promise，在另一个函数中，我们将使用 Promise.all() 访问它们，同时将该函数设为异步，并且 Promise 结果获取将与等待关键字。

Javascript

// Defining our first promise
let firstPromise = () => {
  return new Promise((resolve, reject) => {
    resolve("Hello! ");
  });
};
  
// Defining our second promise
let secondPromise = () => {
  return new Promise((resolve, reject) => {
    resolve("Hi! ");
  });
};
  
// Async function to perform execution of all promise
let promiseExecution = async () => {
  let promise = await Promise.all([
    firstPromise(),
    secondPromise(),
  ]);
  console.log(promise);
};
  
// Function call
promiseExecution();

输出：

['Hello! ', 'Hi! ']

示例 2：在这个示例中，我们也将创建两个简单的 Promise 和一个 Promise，其中我们将在三个不同的方法和一个单独的 Promise 执行方法中使用计时器函数(setTimeout)。

Javascript

// Defined our first promsie
let firstPromise = () => {
  return new Promise((resolve, reject) => {
    resolve("Hello! ");
  });
};
  
// Defined our second promsie
let secondPromise = () => {
  return new Promise((resolve, reject) => {
    resolve("Hi! ");
  });
};
  
// Defined our third promsie
let thirdPromise = () => {
  return new Promise((resolve, reject) => {
    return setTimeout(() => {
      resolve("GeeksforGeeks");
    }, 2000);
  });
};
  
// Async function to perform execution of all promise
let promiseExecution = async () => {
  let promise = await Promise.all([
    firstPromise(),
    secondPromise(),
    thirdPromise(),
  ]);
  console.log(promise);
};
  
// Function call
promiseExecution();

输出：

[ 'Hello! ', 'Hi! ', 'GeeksforGeeks' ]

参考： https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Async_await#awaiting_a_promise.all