快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线：028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后，网站问题一站解决

怎么使用Promise.race()和Promise.any()

这篇文章主要介绍了怎么使用Promise.race()和Promise.any()，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

创新互联公司主要从事成都网站设计、网站建设、网页设计、企业做网站、公司建网站等业务。立足成都服务米林,十载网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18980820575

什么是 Promise ?

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

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

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

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

  1. 鸿蒙官方战略合作共建——HarmonyOS技术社区

  2. Pending：你不知道你是否能得到那部手机

  3. Fulfilled：老妈高兴了，给你买了

  4. 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方法将永远处于待处理状态。

事例

const promise1 = new Promise((resolve, reject) => {     setTimeout(resolve, 500, 'promise 1 resolved'); });  const promise2 = new Promise((resolve, reject) => {     setTimeout(reject, 100, 'promise 2 rejected'); });  const promise3 = new Promise((resolve, reject) => {     setTimeout(resolve, 200, 'promise 3 resolved') });  (async () => {     try {         let result = await Promise.race([promise1, promise2, promise3]);         console.log(result);     } catch (err) {         console.error(err);     } })();   // 输出- "promise 2 rejected"   // 尽管promise1和promise3可以解决，但promise2拒绝的速度比它们快。   // 因此Promise.race方法将以promise2拒绝

真实用例

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

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

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

function getUserInfo(user) {   return new Promise((resolve, reject) => {     // had it at 1500 to be more true-to-life, but 900 is better for testing     setTimeout(() => resolve("user data!"), Math.floor(900*Math.random()));   }); }  function showUserInfo(user) {   return getUserInfo().then(info => {     console.log("user info:", info);     return true;   }); }  function showSpinner() {   console.log("please wait...") }  function timeout(delay, result) {   return new Promise(resolve => {     setTimeout(() => resolve(result), delay);   }); } Promise.race([showUserInfo(), timeout(300)]).then(displayed => {   if (!displayed) showSpinner(); });

**取消的 Promise **

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

function timeout(delay) {   let cancel;   const wait = new Promise(resolve => {     const timer = setTimeout(() => resolve(false), delay);     cancel = () => {       clearTimeout(timer);       resolve(true);     };   });   wait.cancel = cancel;   return wait; }   function doWork() {   const workFactor = Math.floor(600*Math.random());   const work = timeout(workFactor);      const result = work.then(canceled => {     if (canceled)       console.log('Work canceled');     else       console.log('Work done in', workFactor, 'ms');     return !canceled;   });   result.cancel = work.cancel;   return result; }  function attemptWork() {   const work = doWork();   return Promise.race([work, timeout(300)])     .then(done => {       if (!done)         work.cancel();       return (done ? 'Work complete!' : 'I gave up');   }); }  attemptWork().then(console.log);

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

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

const _ = require('lodash')  async function batchRequests(options) {     let query = { offset: 0, limit: options.limit };      do {         batch = await model.findAll(query);         query.offset += options.limit;          if (batch.length) {             const promise = doLongRequestForBatch(batch).then(() => {                 // Once complete, pop this promise from our array                 // so that we know we can add another batch in its place                 _.remove(promises, p => p === promise);             });             promises.push(promise);              // Once we hit our concurrency limit, wait for at least one promise to             // resolve before continuing to batch off requests             if (promises.length >= options.concurrentBatches) {                 await Promise.race(promises);             }         }     } while (batch.length);      // Wait for remaining batches to finish     return Promise.all(promises); }  batchRequests({ limit: 100, concurrentBatches: 5 });

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 成功。

事例

const promise1 = new Promise((resolve, reject) => {   setTimeout(reject, 100, 'promise 1 rejected'); });  const promise2 = new Promise((resolve, reject) => {   setTimeout(resolve, 400, 'promise 2 resolved at 400 ms'); });  const promise3 = new Promise((resolve, reject) => {   setTimeout(resolve, 700, 'promise 3 resolved at 800 ms'); });  (async () => {   try {     let value = await Promise.any([promise1, promise2, promise3]);     console.log(value);   } catch (error) {     console.log(error);   } })();  //Output - "promise 2 resolved at 400 ms"

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

真实用例

从最快的服务器检索资源

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

感谢你能够认真阅读完这篇文章，希望小编分享的“怎么使用Promise.race()和Promise.any()”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!


当前标题：怎么使用Promise.race()和Promise.any()
文章路径：http://6mz.cn/article/jogcsp.html

其他资讯