JavaScript 使用 async-await解释 Promise.all

在本文中，我们将尝试理解如何在 JavaScript 中使用 Promise.all() 结合 async-await 使用某些预定义的语法来轻松处理任务。在直接看待我们所定义的任务之前，让我们先简要了解一下与 Promise.all() 和 async-await 相关的基础知识。

Promise.all():

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

语法： 以下是我们可以使用的语法来执行多个 promises 的 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是我们用来说明特定函数或方法作为异步数据接收器的两个关键字。
使用async-await关键字，我们可以以更清晰的方式展示和获取异步的基于Promise的行为。

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

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

现在我们已经简要了解了 Promise.all() 和 async-await 现在让我们继续我们的任务，实现 Promise.all() 和 async-await 。

示例1: 在这个示例中，我们将在两个不同的函数（或方法）中创建两个promise，并在另一个函数中使用 Promise.all() 来访问它们，同时将该函数设为async，并使用await关键字来获取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： 在这个示例中，我们将创建两个简单的承诺，以及一个承诺，其中我们将在三个不同的方法中使用一个计时器函数（setTimeout），并使用一个单独的方法来执行承诺。

Javascript

// Defined our first promise
let firstPromise = () => {
    return new Promise((resolve, reject) => {
        resolve("Hello! ");
    });
};
 
// Defined our second promise
let secondPromise = () => {
    return new Promise((resolve, reject) => {
        resolve("Hi! ");
    });
};
 
// Defined our third promise
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();

输出结果：