窥视新方法的诺言-css教程-PHP中文网

首页

web前端

css教程

窥视新方法的诺言

William Shakespeare

Apr 19, 2025 am 09:14 AM

A Peek at New Methods Coming to Promises

JavaScript 的 Promise 是其最受赞誉的功能之一。在语言中直接内置原生异步构件，开启了一个新时代，不仅改变了我们的编码方式，也为其他强大的 API（如 fetch！）奠定了基础。

让我们回顾一下 Promise 初次发布时获得的功能，以及接下来将获得哪些新功能。

不了解 Promise 的概念？我强烈推荐 Jake Archibald 的文章作为入门介绍。

现有功能

让我们快速浏览一下目前可以使用 Promise 执行的操作。JavaScript 引入 Promise 后，提供了一个 API 来执行异步操作并对它们的成功返回或失败做出反应，一种围绕某些数据或结果创建关联的方法，而这些数据的或结果的值我们仍然不知道。

以下是我们目前拥有的 Promise 功能。

处理 Promise

每当异步方法返回一个 Promise（例如使用 fetch 时），我们都可以使用 then() 在 Promise fulfilled（已完成）时执行操作，并使用 catch() 来响应 Promise rejected（已拒绝）。

fetch('//resource.to/some/data')
  .then(result => console.log('我们得到了它', result.json()))
  .catch(error => console.error('出现错误', error))

经典用例是从 API 调用数据，并在数据返回时加载数据，或者如果找不到数据则显示错误消息。

此外，在其初始版本中，我们获得了两种处理 Promise 组的方法。

解析和拒绝 Promise 集合

当 Promise 成功解析时，它可以被 fulfilled；当它以错误解析时，它可以被 rejected；当没有解析时，它处于 pending 状态。当 Promise 已解析时，无论结果如何，它都被认为是已完成的。

因此，我们有两种方法可以帮助处理 Promise 组的行为，具体取决于我们获得的状态组合。

Promise.all 就是其中一种方法。只有当所有 Promise 都成功解析时，它才会 fulfilled，并返回一个包含每个 Promise 结果的数组。如果其中一个 Promise 失败，Promise.all 将进入 catch 并返回错误原因。

Promise.all([
    fetch('//resource.to/some/data'),
    fetch('//resource.to/more/data')
  ])
  .then(results => console.log('我们得到一个结果数组', results))
  .catch(error => console.error('其中一个 Promise 失败了', error))

在这种情况下，一旦集合的成员之一抛出错误，Promise.all 将短路并进入 catch，或者当所有 Promise 都 fulfilled 时完成。

查看 Domenic Denicola 关于 Promise 状态的简短文章，以更详细地了解其措辞和概念。

我们还有 Promise.race，它会立即解析为它获得的第一个 Promise，无论它是 fulfilled 还是 rejected。第一个 Promise 解析后，其余 Promise 将被忽略。

Promise.race([
    fetch('//resource.to/some/data'),
    fetch('//resource.to/other/data')
  ])
  .then(result => console.log('第一个 Promise 已解析', result))
  .catch(reason => console.error('其中一个 Promise 失败了，因为', reason))

新功能

好的，我们将把注意力转向我们可以期待的新 Promise 功能。

Promise.allSettled

下一个提议添加到 Promise 家族的是 Promise.allSettled，顾名思义，它只有在数组中的所有集合成员不再处于 pending 状态时才会继续执行，无论它们是 rejected 还是 fulfilled。

Promise.allSettled([
    fetch('//resource.to/some/data'),
    fetch('//resource.to/more/data'),
    fetch('//resource.to/even/more/data')
  ])
  .then(results => {
    const fulfilled = results.filter(r => r.status === 'fulfilled')
    const rejected = results.filter(r => r.status === 'rejected')
  })

请注意，这与 Promise.all 不同，因为我们永远不会进入 catch 语句。如果我们正在等待将进入 Web 应用程序不同部分的数据集，但希望为每个结果提供更具体的邮件或执行不同的操作，这非常好。

Promise.any

下一个新方法是 Promise.any，它允许我们对集合中的任何 fulfilled Promise 做出反应，但只有在所有 Promise 都失败时才会短路。

Promise.any([
    fetch('//resource.to/some/data'),
    fetch('//resource.to/more/data'),
    fetch('//resource.to/even/more/data')
  ])
  .then(result => console.log('一批数据已到达', result))
  .catch(() => console.error('所有 Promise 都失败了'))

这有点像 Promise.race，除了 Promise.race 在第一次解析时短路。因此，如果集合中的第一个 Promise 以错误解析，Promise.race 将继续执行。Promise.any 将继续等待数组中其余项目解析，然后再继续执行。