教程：在 JavaScript 中从头开始实现 Polyfills PromiseallSettled

教程：在 javascript 中从头开始实现 polyfills promiseallsettled

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 数组中。如果 promise 得到解决，则该对象包含 { status: 'fulfilled', value }。如果拒绝，则存储 { status: 'rejected', reason }.

4。计算已达成的承诺：

我们使用计数变量来跟踪已解决的承诺数量。每次 promise 完成时（通过 .then() 或 .catch()），我们都会增加计数。一旦 count 等于输入数组的长度，我们就用结果数组解析外部承诺。

第三步：测试我们的 allsettled 函数

现在，让我们测试这个自定义实现：

const promises = [
  promise.resolve('task 1 completed'),
  promise.reject('task 2 failed'),
  promise.resolve('task 3 completed')
];

allsettled(promises).then((results) => {
  console.log(results);
});

输出：

[
  { status: 'fulfilled', value: 'Task 1 completed' },
  { status: 'rejected', reason: 'Task 2 failed' },
  { status: 'fulfilled', value: 'Task 3 completed' }
]

正如预期的那样，该函数等待所有 promise 解决，结果数组为我们提供有关每个 promise 的详细信息，包括它是解决还是拒绝。

更深入地审视承诺

为了加强理解，让我们来分解一下 promise 的工作原理：

promise 代表异步操作的最终结果。当 promise 创建时，它处于待处理状态。
承诺可以是：

操作成功完成后已解决（已完成）。

操作失败时被拒绝。

满足或拒绝时结算

then() 方法允许我们指定一个在 promise 解决时要执行的函数，而 catch() 允许我们处理拒绝。使用finally() 确保我们处理承诺结算（成功或失败）而不会重复。

结论

自己实现 promise.allsettled 是从根本上理解 promise 如何工作的绝佳方式。关键要点是 promise.allsettled 会等待所有 promise 完成，这与 promise.all 不同，promise.all 在遇到拒绝时会停止。

通过从头开始实现这一点，您还学习了如何以干净高效的方式处理多个异步操作。现在，您可以使用这些知识在任何 javascript 环境中处理 promise，包括那些本身不支持现代功能的环境。

以上就是教程：在 JavaScript 中从头开始实现 Polyfills PromiseallSettled的详细内容，更多请关注其它相关文章！