当前位置：首页 > 文章列表 > 文章 > 前端 > 教程：在 JavaScript 中从头开始实现 Polyfills PromiseallSettled

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

来源：dev.to 2024-12-16 14:07:01 0浏览收藏

golang学习网今天将给大家带来《教程：在 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 的详细信息，包括它是解决还是拒绝。