這篇文章主要介紹Promise.race()和Promise.any()怎么用,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
公司主營業(yè)務(wù):網(wǎng)站制作、成都做網(wǎng)站、移動(dòng)網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳,提高企業(yè)的競(jìng)爭(zhēng)能力。創(chuàng)新互聯(lián)是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化,感謝他們對(duì)我們的高要求,感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn),讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)推出肅州免費(fèi)做網(wǎng)站回饋大家。MDN 上對(duì) Promise 的定義:Promise 對(duì)象用于表示一個(gè)異步操作的最終完成 (或失敗)及其結(jié)果值。對(duì)于新手來說,這聽起來可能有點(diǎn)太復(fù)雜了。
國外一位大什么對(duì)Promises
的解釋如下:“想象一下你是個(gè)孩子。 你老媽向你保證,她下周會(huì)給你買一部新手機(jī)?!?/p>
你要到下周才能知道你是否能獲取那部手機(jī)。你老媽要么真的給你買了一個(gè)全新的手機(jī),要么因?yàn)椴婚_心就不給你買。
這個(gè)就是一個(gè)Promise
。 一個(gè)Promise
有三個(gè)狀態(tài)。 分別是:
Pending:你不知道你是否能得到那部手機(jī)
Fulfilled:老媽高興了,給你買了
Rejected:老娘不開森了,不給你買了
這個(gè)是我目前聽到,最快能理解 Promise 事例。
如果你還沒有開始學(xué)習(xí) Promise ,建議你這樣做。
Promise包含幾種非常有用的內(nèi)置方法。 今天我們主要介紹這兩種方法。
Promise.race()
-與 ES6 一起發(fā)布
Promise.any()
-仍處于第4階段的提案中
Promise.race()
方法最初是在 ES6 中引入 Promise 時(shí)發(fā)布的,這個(gè)方法需要一個(gè)iterable
作為參數(shù)。
Promise.race(iterable)
方法返回一個(gè) promise,一旦迭代器中的某個(gè)promise
解決或拒絕,返回的 promise 就會(huì)解決或拒絕。
與Promise.any()
方法不同,Promise.race()
方法主要關(guān)注 Promise 是否已解決,而不管其被解決還是被拒絕。
Promise.race(iterable)
iterable
— 可迭代對(duì)象,類似 Array。 iterable 對(duì)象實(shí)現(xiàn)Symbol.iterator
方法。
一個(gè)待定的 Promise 只要給定的迭代中的一個(gè)promise解決或拒絕,就采用第一個(gè)promise的值作為它的值,從而異步地解析或拒絕(一旦堆棧為空)。
因?yàn)閰?shù)接受iterable
,所以我們可以傳遞一些值,比如基本值,甚至數(shù)組中的對(duì)象。在這種情況下,race
方法將返回傳遞的第一個(gè)非 promise 對(duì)象。這主要是因?yàn)榉椒ǖ男袨槭窃谥悼捎脮r(shí)(當(dāng) promise 滿足時(shí))立即返回值。
此外,如果在iterable
中傳遞了已經(jīng)解決的Promise,則Promise.race()
方法將解析為該值的第一個(gè)。 如果傳遞了一個(gè)空的Iterable
,則race
方法將永遠(yuǎn)處于待處理狀態(tài)。
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拒絕
現(xiàn)在,你可能想知道,我們?cè)趯?shí)戰(zhàn)中何時(shí) Promise.race() ? 來看看。
在請(qǐng)求數(shù)據(jù)時(shí),顯示加載動(dòng)畫
使用加載動(dòng)畫開發(fā)中是非常常見。當(dāng)數(shù)據(jù)響應(yīng)時(shí)間較長(zhǎng)時(shí),如果沒使用加載動(dòng)畫,看起來就像沒有響應(yīng)一樣。但有時(shí),響應(yīng)太快了,我們需要加載動(dòng)畫時(shí),增加一個(gè)非常小延遲時(shí)間,這樣會(huì)讓用戶覺得我是在經(jīng)常請(qǐng)求過來的。要實(shí)現(xiàn)這一點(diǎn),只需使用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,這時(shí)也可以借助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);
批處理請(qǐng)求,用于長(zhǎng)時(shí)間執(zhí)行
Chris Jensen 有一個(gè)有趣的race()
方法用例。 他曾使用Promise.race()
方法批處理長(zhǎng)時(shí)間運(yùn)行的請(qǐng)求。 這樣一來,他們可以保持并行請(qǐng)求的數(shù)量固定。
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()
接收一個(gè)Promise
可迭代對(duì)象,只要其中的一個(gè)promise
成功,就返回那個(gè)已經(jīng)成功的promise
。如果可迭代對(duì)象中沒有一個(gè)promise
成功(即所有的promises
都失敗/拒絕),就返回一個(gè)失敗的 promise 和AggregateError
類型的實(shí)例,它是 Error 的一個(gè)子類,用于把單一的錯(cuò)誤集合在一起。本質(zhì)上,這個(gè)方法和Promise.all()
是相反的。
注意!Promise.any()
方法依然是實(shí)驗(yàn)性的,尚未被所有的瀏覽器完全支持。它當(dāng)前處于 TC39 第四階段草案(Stage 4)
Promise.any(iterable);
iterable
— 個(gè)可迭代的對(duì)象, 例如 Array。
如果傳入的參數(shù)是一個(gè)空的可迭代對(duì)象,則返回一個(gè)已失敗(already rejected) 狀態(tài)的Promise
。
如果傳入的參數(shù)不包含任何 promise,則返回一個(gè)異步完成 (asynchronously resolved)的 Promise。
其他情況下都會(huì)返回一個(gè)處理中(pending) 的 Promise。 只要傳入的迭代對(duì)象中的任何一個(gè)promise
變成成功(resolve)狀態(tài),或者其中的所有的promises
都失敗,那么返回的promise
就會(huì) 異步地(當(dāng)調(diào)用棧為空時(shí)) 變成成功/失?。╮esolved/reject)狀態(tài)。
這個(gè)方法用于返回第一個(gè)成功的 promise 。只要有一個(gè) promise 成功此方法就會(huì)終止,它不會(huì)等待其他的 promise 全部完成。
不像Promise.all()
會(huì)返回一組完成值那樣(resolved values),我們只能得到一個(gè)成功值(假設(shè)至少有一個(gè) promise 完成)。當(dāng)我們只需要一個(gè) promise 成功,而不關(guān)心是哪一個(gè)成功時(shí)此方法很有用的。
同時(shí), 也不像Promise.race()
總是返回第一個(gè)結(jié)果值(resolved/reject
)那樣,這個(gè)方法返回的是第一個(gè) 成功的 值。這個(gè)方法將會(huì)忽略掉所有被拒絕的 promise,直到第一個(gè) 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()
主要關(guān)注解析的值。 它會(huì)忽略在100毫秒時(shí)拒絕的promise1
,并考慮在400毫秒后解析的promise2
的值。
從最快的服務(wù)器檢索資源
假設(shè)訪問我們網(wǎng)站的用戶可能來自全球各地。如果我們的服務(wù)器基于單個(gè)位置,那么響應(yīng)時(shí)間將根據(jù)每個(gè)用戶的位置而不同。但是如果我們有多個(gè)服務(wù)器,可以使用能夠產(chǎn)生最快響應(yīng)的服務(wù)器。在這種情況下,可以使用Promise.any()
方法從最快的服務(wù)器接收響應(yīng)。
以上是“Promise.race()和Promise.any()怎么用”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
分享標(biāo)題:Promise.race()和Promise.any()怎么用-創(chuàng)新互聯(lián)
URL網(wǎng)址:http://www.muchs.cn/article22/diegjc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供電子商務(wù)、App設(shè)計(jì)、網(wǎng)站設(shè)計(jì)公司、企業(yè)建站、自適應(yīng)網(wǎng)站、云服務(wù)器
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容