教程：在 JavaScript 中从头开始实现 Polyfills Promise.allSettled

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中文网其他相关文章！