文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Promise.race和Promise.any如何使用

2023-07-04 14:38

关注

本文小编为大家详细介绍“Promise.race和Promise.any如何使用”,内容详细,步骤清晰,细节处理妥当,希望这篇“Promise.race和Promise.any如何使用”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。

什么是 Promise ?

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

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

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

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

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

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

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

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

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。

返回值

说明

这个方法用于返回第一个成功的 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如何使用”文章已经介绍完毕,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注编程网行业资讯频道。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯