如何在 JavaScript 中按顺序执行多个 Promise？

在本文中，我们将尝试了解如何使用 JavaScript 提供的几种技术或方法轻松地以顺序方式（一个接一个）执行多个 Promise。

让我们首先快速了解如何使用 JavaScript 提供的以下语法来创建 Promise。

语法：以下语法可用于在 JavaScript 中创建 Promise。

let promise = new Promise((resolve, reject) => resolve(10))

通过使用上述语法，我们可以通过解决它（具有已解决状态）或拒绝它（具有已拒绝状态）来成功创建我们的 Promise。

示例：在这个示例中，我们将创建一个简单的 Promise 来查看它是如何工作的或如何执行的。

Javascript

    let promise = new Promise((resolve, reject) => {
        resolve("GeeksforGeeks");
    });
    promise.then(result => console.log(result));

输出：

GeeksforGeeks

现在我们已经了解了如何创建一个 Promise，让我们快速查看和可视化我们如何以顺序方式执行多个 Promise。

以下是我们可以轻松地以顺序方式执行多个 Promise 的某些方法。

方法一：

• 在这种方法中，我们将使用Promise.all()方法，该方法将单个数组中的所有 Promise 作为其输入。
• 结果，这个方法本身执行了所有的 Promise，并返回一个新的 Promise，其中所有其他 Promise 的值组合在一起。
• 新返回的单个 Promise 中的值将按顺序排列（一个接一个）。
• 将返回的输出采用数组的形式，其中包含被其他两个 Promise 解析或拒绝的值。

示例：让我们看一下说明上述方法的以下代码：

Javascript

    let promise1 = new Promise((resolve, reject) => {
        resolve("Hello! ");
    });
  
    let promise2 = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("GeeksforGeeks");
        }, 1000);
    });
  
    Promise.all([promise1, promise2])
        .then((result) => console.log(result));

输出：

[ 'Hello! ', 'GeeksforGeeks' ]

方法二：

• 在这种方法中，我们将使用Promise.allSettled() ，它将以与 Promise.all() 方法非常相似的方式执行，通过将 Promise 作为单个数组中的输入并按顺序执行它们来执行。
• 略有不同的是，这个 Promise.allSettled() 方法返回一个对象数组，其中与每个 promise 的状态（已完成或拒绝）一起，每个 promise 的值也在那里。

示例：让我们看一下说明上述方法的以下代码：

Javascript

    let promise1 = new Promise((resolve, reject) => {
        resolve("Hello! ");
    });
  
    let promise2 = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("GeeksforGeeks");
        }, 1000);
    });
  
    Promise.allSettled([promise1, promise2])
        .then((result) => console.log(result));

输出：

[
  { status: 'fulfilled', value: 'Hello! ' },
  { status: 'fulfilled', value: 'GeeksforGeeks' }
]

方法3：

• 在这种方法中，我们将使用 for-of 循环和async-await方法。
• 我们将在 Promise 数组上运行循环，进一步创建一个异步函数，从而将结果与 try-catch 块一起等待到结果 Promise 中，从而在浏览器的控制台上打印结果。

示例：让我们看一下说明上述方法的以下代码：

Javascript

    let promise1 = new Promise((resolve, reject) => {
        resolve("Hello! ");
    });
  
    let promise2 = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("GeeksforGeeks");
        }, 1000);
    });
  
    let promiseExecution = async () => {
        for (let promise of [promise1, promise2]) {
            try {
                const message = await promise;
                console.log(message);
            } catch (error) {
                console.log(error.message);
            }
        }
    };
    promiseExecution();

输出：

Hello! 
GeeksforGeeks