Promise.race()和Promise.any()怎么用
这篇文章主要介绍Promise.race()和Promise.any()怎么用,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
创新互联专注于沁水网站建设服务及定制,我们拥有丰富的企业做网站经验。 热诚为您提供沁水营销型网站建设,沁水网站制作、沁水网页设计、沁水网站官网定制、微信平台小程序开发服务,打造沁水网络公司原创品牌,更为您提供沁水网站排名全网营销落地服务。
什么是 Promise ?
MDN 上对 Promise 的定义:Promise 对象用于表示一个异步操作的最终完成 (或失败)及其结果值。对于新手来说,这听起来可能有点太复杂了。
国外一位大什么对Promises
的解释如下:“想象一下你是个孩子。 你老妈向你保证,她下周会给你买一部新手机。”
你要到下周才能知道你是否能获取那部手机。你老妈要么真的给你买了一个全新的手机,要么因为不开心就不给你买。
这个就是一个Promise
。 一个Promise
有三个状态。 分别是:
Pending:你不知道你是否能得到那部手机
Fulfilled:老妈高兴了,给你买了
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()怎么用
链接URL:http://pwwzsj.com/article/gdggoh.html