新的 Promise 方法：allSettled、any 和 race

前端

2023-11-28 09:10:05

Promise 方法：解锁灵活而强大的异步处理

什么是 Promise？

Promise 是 JavaScript 中的强大工具，用于处理异步操作。它们允许我们在执行长时间运行的任务时保持代码整洁和可读。在深入探讨三个新颖的 Promise 方法之前，让我们快速回顾一下基础知识。

Promise 的基础

Promise 表示异步操作的最终结果。它可以处于三种状态之一：

待处理： 操作尚未启动。
已完成： 操作已成功完成，并带有结果值。
已拒绝： 操作失败，并带有错误对象。

我们可以使用 .then() 和 .catch() 方法来处理 Promise。.then() 用于成功情况，.catch() 用于失败情况。

高级 Promise 用法

一旦掌握了基础知识，我们可以探索一些高级 Promise 用法，例如 Promise 链式调用和组合。

Promise 链式调用

Promise 链式调用允许我们轻松地将多个 Promise 链接在一起，依次处理结果。它通过返回 Promise 来实现，从而使我们可以将其链接到另一个 .then() 调用。

Promise 组合

Promise 组合使我们能够将多个 Promise 组合成一个 Promise。例如，Promise.all() 等待所有传入的 Promise 完成，而 Promise.race() 等待第一个 Promise 完成。

三个新颖的 Promise 方法

现在，我们深入了解三个新颖的 Promise 方法：allSettled、any 和 race。

allSettled：跟踪所有结果

allSettled 接受一个 Promise 数组作为参数，并返回一个新的 Promise。这个新 Promise 等待所有传入的 Promise 完成，无论成功或失败。它返回一个包含每个传入 Promise 结果的数组，其中每个元素都是一个对象，包含状态（"fulfilled" 或 "rejected"）和值（结果或错误对象）。

any：第一个结果优先

any 也接受一个 Promise 数组，但它在第一个 Promise 完成后（无论成功或失败）就完成。它返回第一个完成 Promise 的结果值。

race：竞速到终点

race 也是接受一个 Promise 数组，但它等待第一个 Promise 完成（无论成功或失败）。它返回第一个完成 Promise 的结果值。

示例

以下是使用新方法的示例代码：

// allSettled
const promises = [
  fetch('https://example.com/users'),
  fetch('https://example.com/posts'),
  fetch('https://example.com/comments')
];

Promise.allSettled(promises).then((results) => {
  for (const result of results) {
    if (result.status === 'fulfilled') {
      console.log(`Success: ${result.value}`);
    } else {
      console.error(`Error: ${result.value}`);
    }
  }
});

// any
Promise.any(promises).then((result) => {
  console.log(`First result: ${result}`);
});

// race
Promise.race(promises).then((result) => {
  console.log(`First result: ${result}`);
});