JavaScript 在 ES2020 中引入了 Promise.allSettled，以便更轻松地处理多个异步操作。与 Promise.all 不同，Promise.allSettled 在 Promise 被拒绝时会短路，Promise.allSettled 可确保您从所有 Promise 中获得结果，无论它们成功还是失败。
在本教程中，我将引导您创建自己的 Promise.allSettled 实现，重点是从头开始构建它。我们还将探索 Promise 在幕后如何工作，帮助您了解使 JavaScript 如此强大的异步行为。
什么是 Promise.allSettled？
在开始编写代码之前，让我们先来分解一下 Promise.allSettled 的作用：
-
输入：承诺数组。
-
输出：在所有输入承诺都解决（履行或拒绝）后解析的承诺，并带有描述每个承诺结果的对象数组。
数组中的每个对象包含：
-
状态：“已完成”或“已拒绝”。
-
值：承诺解决时的值，或拒绝时的原因。
例子：
const promises = [
Promise.resolve('Success'),
Promise.reject('Failure'),
Promise.resolve('Complete')
];
Promise.allSettled(promises).then(results => {
console.log(results);
});
登录后复制
登录后复制
输出：
[
{ status: 'fulfilled', value: 'Success' },
{ status: 'rejected', reason: 'Failure' },
{ status: 'fulfilled', value: 'Complete' }
]
登录后复制
登录后复制
当您需要等待所有 Promise 完成时，无论它们成功还是失败，此方法都是理想的选择。
为什么要自己实现 Promise.allSettled？
尽管现代浏览器中现已提供此功能，但您自己实现它可以让您更深入地了解 JavaScript Promise 的工作原理。另外，它还确保与本身不支持 ES2020 功能的旧环境兼容。
实施 Promise.allSettled 的分步指南
我们将创建一个名为 allSettled 的函数，它模仿 Promise.allSettled 的行为。让我们逐步构建这个：
第 1 步：创建包装函数
该函数接受一组 Promise 并返回一个新的 Promise。当所有输入的承诺都解决（解决或拒绝）时，这个新的承诺将得到解决。
function allSettled(promises) {
// This will return a new promise that resolves when all promises settle
return new Promise((resolve) => {
// Implementation goes here
});
}
登录后复制
第 2 步：处理每个 Promise
对于数组中的每个 Promise，我们需要跟踪它是解决还是拒绝。我们将用 .then() 和 .catch() 包装每个 Promise 以捕获其状态：
function allSettled(promises) {
return new Promise((resolve) => {
let results = [];
let count = 0;
promises.forEach((promise, index) => {
// Wrap the promise with a .then() and .catch() to capture the result
promise
.then((value) => {
results[index] = { status: 'fulfilled', value };
})
.catch((reason) => {
results[index] = { status: 'rejected', reason };
})
.finally(() => {
count++;
// Once all promises have settled, resolve the outer promise
if (count === promises.length) {
resolve(results);
}
});
});
});
}
登录后复制
解释：
1。创建外部承诺：
allSettled 函数返回一个新的 Promise。当所有输入承诺都解决后，此承诺将得到解决。
2。循环 Promise：
我们使用 .forEach 循环遍历 Promise 数组。对于每个承诺，我们使用 .then() （对于已解决的承诺）和 .catch() （对于拒绝的承诺）跟踪其结果。
3。记录结果：
每个 Promise 的结果都存储在 results 数组中。如果承诺得到解决，则该对象包含 { status: 'fulfilled', value }。如果拒绝，则存储 { status: 'rejected', Reason }.
4。计算已达成的承诺：
我们使用计数变量来跟踪已解决的承诺数量。每次 Promise 完成时（通过 .then() 或 .catch()），我们都会增加计数。一旦 count 等于输入数组的长度，我们就用结果数组解析外部承诺。
第三步：测试我们的 allSettled 函数
现在，让我们测试一下这个自定义实现：
const promises = [
Promise.resolve('Success'),
Promise.reject('Failure'),
Promise.resolve('Complete')
];
Promise.allSettled(promises).then(results => {
console.log(results);
});
登录后复制
登录后复制
输出：
[
{ status: 'fulfilled', value: 'Success' },
{ status: 'rejected', reason: 'Failure' },
{ status: 'fulfilled', value: 'Complete' }
]
登录后复制
登录后复制
正如预期的那样，该函数等待所有 Promise 解决，结果数组为我们提供有关每个 Promise 的详细信息，包括它是解决还是拒绝。
更深入地审视承诺
为了加强理解，让我们来分解一下 Promise 的工作原理：
- Promise 代表异步操作的最终结果。当 Promise 创建时，它处于待处理状态。
- 承诺可以是：
操作成功完成后已解决（已完成）。
操作失败时被拒绝。
满足或拒绝时结算
then() 方法允许我们指定一个在 Promise 解决时要执行的函数，而 catch() 允许我们处理拒绝。使用finally() 确保我们处理承诺结算（成功或失败）而不会重复。
结论
自己实现 Promise.allSettled 是从根本上理解 Promise 如何工作的绝佳方式。关键要点是 Promise.allSettled 会等待所有 Promise 完成，这与 Promise.all 不同，Promise.all 在遇到拒绝时会停止。
通过从头开始实现这一点，您还学习了如何以干净高效的方式处理多个异步操作。现在，您可以使用这些知识在任何 JavaScript 环境中处理 Promise，包括那些本身不支持现代功能的环境。
以上是教程：在 JavaScript 中从头开始实现 Polyfills Promise.allSettled的详细内容。更多信息请关注PHP中文网其他相关文章！
