如何使用Promise.race() 和 Promise.any() ？

客官°小女子只卖身不卖艺 2022-12-28 09:01 178阅读 0赞

> 作者：Mahdhi Rezvi  
> 译者：前端小智  
> 来源: medium

**双12 A 里服务器`27`块，通用[点击这里][Link 1]购买可以找我返现30，等于`27`块就能买到了，只限新用户，可以用家人的手机号购买！**

自1996年发布以来，JS 一直在稳步改进。随着ECMAScript版本的许多改进，最近的版本是`ES2020`。JS 的一个重要更新是**Promise**，在2015年,它以 ES6 的名义发布。

## 什么是 Promise ？ ##

MDN 上对 Promise 的定义：Promise 对象用于表示一个异步操作的最终完成 (或失败)及其结果值。对于新手来说，这听起来可能有点太复杂了。

国外一位大什么对`Promises`的解释如下：“想象一下你是个孩子。 你老妈向你保证，她下周会给你买一部新手机。”

你要到下周才能知道你是否能获取那部手机。你老妈要么真的给你买了一个全新的手机，要么因为不开心就不给你买。

这个就是一个`Promise`。 一个`Promise`有三个状态。 分别是：

1.  Pending：你不知道你是否能得到那部手机
2.  Fulfilled：老妈高兴了，给你买了
3.  Rejected：老娘不开森了，不给你买了

这个是我目前听到，最快能理解 Promise 事例。

如果你还没有开始学习 Promise ，建议你这样做。

Promise包含几种非常有用的内置方法。 今天我们主要介绍这两种方法。

*  `Promise.race()`\-与 ES6 一起发布
 *  `Promise.any()` \-仍处于第4阶段的提案中

## Promise.race() ##

`Promise.race()`方法最初是在 ES6 中引入 Promise 时发布的，这个方法需要一个`iterable`作为参数。

`Promise.race(iterable)` 方法返回一个 promise，一旦迭代器中的某个`promise`解决或拒绝，返回的 promise 就会解决或拒绝。

与`Promise.any()`方法不同，`Promise.race()`方法主要关注 Promise 是否已解决，而不管其被解决还是被拒绝。

#### 语法 ####

Promise.race(iterable)

#### 参数 ####

`iterable` — 可迭代对象，类似 Array。 iterable 对象实现`Symbol.iterator`方法。

#### 返回值 ####

一个**待定的** Promise 只要给定的迭代中的一个promise解决或拒绝，就采用第一个promise的值作为它的值，从而**异步**地解析或拒绝（一旦堆栈为空）。

#### 注意 ####

因为参数接受`iterable`，所以我们可以传递一些值，比如基本值，甚至数组中的对象。在这种情况下，`race`方法将返回传递的第一个非 promise 对象。这主要是因为方法的行为是在值可用时(当 promise 满足时)立即返回值。

此外，如果在`iterable`中传递了已经解决的Promise，则`Promise.race()`方法将解析为该值的第一个。 如果传递了一个空的`Iterable`，则`race`方法将永远处于待处理状态。

#### 事例 ####

#### 真实用例 ####

现在，你可能想知道，我们在实战中何时 Promise.race() ？ 来看看。

**在请求数据时，显示加载动画**

使用加载动画开发中是非常常见。当数据响应时间较长时，如果没使用加载动画，看起来就像没有响应一样。但有时，响应太快了，我们需要加载动画时，增加一个非常小延迟时间，这样会让用户觉得我是在经常请求过来的。要实现这一点，只需使用`Promise.race()`方法，如下所示。

\*\*取消的 Promise \*\*

有些情况下，我们需要取消 Promise，这时也可以借助 `Promise.race()` 方法：

**批处理请求，用于长时间执行**

**Chris Jensen** 有一个有趣的`race()`方法用例。 他曾使用`Promise.race()`方法批处理长时间运行的请求。 这样一来，他们可以保持并行请求的数量固定。

## Promise.any() ##

`Promise.any()` 接收一个`Promise`可迭代对象，只要其中的一个 `promise` 成功，就返回那个已经成功的 `promise` 。如果可迭代对象中没有一个 `promise` 成功（即所有的 `promises` 都失败/拒绝），就返回一个失败的 promise 和`AggregateError`类型的实例，它是 Error 的一个子类，用于把单一的错误集合在一起。本质上，这个方法和`Promise.all()`是相反的。

> 注意！ `Promise.any()` 方法依然是实验性的，尚未被所有的浏览器完全支持。它当前处于 TC39 第四阶段草案（Stage 4）

#### 语法 ####

Promise.any(iterable);

#### 参数 ####

`iterable` — 个可迭代的对象, 例如 Array。

#### 返回值 ####

*  如果传入的参数是一个空的可迭代对象，则返回一个 **已失败（already rejected）** 状态的 `Promise`。
 *  如果传入的参数不包含任何 promise，则返回一个 \*\*异步完成 （asynchronously resolved）\*\*的 Promise。
 *  其他情况下都会返回一个**处理中（pending）** 的 Promise。 只要传入的迭代对象中的任何一个 `promise` 变成成功（resolve）状态，或者其中的所有的 `promises` 都失败，那么返回的 `promise` 就会 异步地（当调用栈为空时） 变成成功/失败（resolved/reject）状态。

#### 说明 ####

这个方法用于返回第一个成功的 promise 。只要有一个 promise 成功此方法就会终止，它不会等待其他的 promise 全部完成。

不像 `Promise.all()` 会返回一组完成值那样（resolved values），我们只能得到一个成功值（假设至少有一个 promise 完成）。当我们只需要一个 promise 成功，而不关心是哪一个成功时此方法很有用的。

同时, 也不像 `Promise.race()` 总是返回第一个结果值（`resolved/reject`）那样，这个方法返回的是第一个 成功的 值。这个方法将会忽略掉所有被拒绝的 promise，直到第一个 promise 成功。

#### 事例 ####

从上面代码注意到`Promise.any()`主要关注解析的值。 它会忽略在100毫秒时拒绝的`promise1`，并考虑在400毫秒后解析的`promise2`的值。

#### 真实用例 ####

**从最快的服务器检索资源**

假设访问我们网站的用户可能来自全球各地。如果我们的服务器基于单个位置，那么响应时间将根据每个用户的位置而不同。但是如果我们有多个服务器，可以使用能够产生最快响应的服务器。在这种情况下，可以使用`Promise.any()`方法从最快的服务器接收响应。

我是小智，我们下期再见！

--------------------

**代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 [Fundebug][]。**

原文：https://blog.bitsrc.io/introduction-to-promise-race-and-promise-any-with-real-life-examples-9d8d1b9f8ec9

## 交流 ##

文章每周持续更新，可以微信搜索 **【大迁世界 】** 第一时间阅读，回复 **【福利】** 有多份前端视频等着你，本文 GitHub [https://github.com/qq449245884/xiaozhi][https_github.com_qq449245884_xiaozhi] 已经收录，欢迎Star。

[Link 1]: https://www.aliyun.com/minisite/goods?taskCode=pintuan20201212&recordId=297031&userCode=pxuujn3r
[Fundebug]: https://www.fundebug.com/?utm_source=xiaozhi
[https_github.com_qq449245884_xiaozhi]: https://github.com/qq449245884/xiaozhi