JavaScript 使用async-await解释Promise.allSettled()

在这篇文章中，我们将尝试理解如何使用async-await在JavaScript中实现Promise.allSettled()方法，并通过一些编码示例和理论解释来帮助我们。首先快速了解一下Promise.allSettled()方法。这个方法是Promise对象下最常见的方法之一，它在所有的promise都成功解决或被拒绝之后执行。这个方法的输出将是一个包含多个对象的数组（取决于用户创建的promise的数量），每个对象都包含每个promise的值和状态。如果任务之间有依赖关系或者我们想在任意时刻拒绝一个特定的promise，最好使用Promise.all()方法。

语法：

在实现Promise.allSettled()方法时，优先考虑使用以下语法：

Promise.allSettled([first_promise, second_promise, ...]).then(
    // do something...
)

在分析了上述语法之后，我们将看到以下示例，这将帮助我们更好地理解上述语法，并提高效率：

示例1： 在这个示例中，我们将创建三个连续的Promise。每个Promise将包含一个不同的计时函数，具有不同的超时时间。之后，我们将使用Promise.allSettled()方法，它将以数组（或可迭代对象）的形式接受所有三个Promise作为输入，并根据其角色执行结果。

Javascript

let first_promise = new Promise((resolve, reject) => { 
    setTimeout(() => { 
        resolve("GeeksforGeeks...!!"); 
    }, 1000); 
}); 
  
let second_promise = new Promise((resolve, reject) => { 
    setTimeout(() => { 
        resolve("JavaScript......!!"); 
    }, 2000); 
}); 
  
let third_promise = new Promise((resolve, reject) => { 
    setTimeout(() => { 
        resolve("TypeScript...!!"); 
    }, 3000); 
}); 
  
let promise_array = [first_promise, second_promise, third_promise]; 
Promise.allSettled(promise_array).then((result) => console.log(result));

输出:

[
  { status: 'fulfilled', value: 'GeeksforGeeks...!!' },
  { status: 'fulfilled', value: 'JavaScript......!!' },
  { status: 'fulfilled', value: 'TypeScript...!!' }
]

现在我们已经看到了如何实现Promise.allSettled()方法，让我们看看如何使用async-await关键字来实现这个方法。

示例2： 在这个示例中，我们将依次创建三个不同的timer函数的promise（就像我们在上一个示例中做的那样）。每个promise都包含一个不同的超时时间。然后我们将创建一个带有前缀 async 的函数，在函数内部使用 await 关键字来捕获或存储结果。然后，我们将使用Promise.allSettled()方法，它将以数组（或可迭代对象）的形式将所有三个promise作为输入并根据其角色执行结果。

Javascript

let first_promise = new Promise((resolve, reject) => { 
    setTimeout(() => { 
        resolve("GeeksforGeeks...!!"); 
    }, 1000); 
}); 
  
let second_promise = new Promise((resolve, reject) => { 
    setTimeout(() => { 
        resolve("JavaScript......!!"); 
    }, 2000); 
}); 
  
let third_promise = new Promise((resolve, reject) => { 
    setTimeout(() => { 
        resolve("TypeScript...!!"); 
    }, 3000); 
}); 
  
async function displayResult() { 
    let promise_array = [first_promise, second_promise, third_promise]; 
    let result = await promise_array; 
    Promise.allSettled(promise_array).then((result) => console.log(result)); 
} 
  
displayResult();

输出结果：

[
  { status: 'fulfilled', value: 'GeeksforGeeks...!!' },
  { status: 'fulfilled', value: 'JavaScript......!!' },
  { status: 'fulfilled', value: 'TypeScript...!!' }
]