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。

方法1:

在这个方法中，我们将使用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' ]

方法2：

在这种方法中，我们将使用Promise.allSettled() 它将以与 Promise.all() 方法类似的方式执行，将承诺作为输入并逐个执行它们。
有一个小小的区别，即这个Promise.allSettled()方法返回一个对象数组，其中包含每个承诺的状态（已完成或已拒绝）以及每个承诺的值。

示例： 让我们看一下下面的代码，它说明了上述方法：

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块 等待结果，并将结果打印到浏览器控制台上。

示例： 让我们看下面的代码，它说明了上述方法：

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();

输出结果：