這篇文章主要介紹了怎么使用Promise.race()和Promise.any()，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)公司主要從事成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)米林,十載網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):18980820575

什么是 Promise ?

MDN 上對(duì) Promise 的定義：Promise 對(duì)象用于表示一個(gè)異步操作的最終完成  (或失敗)及其結(jié)果值。對(duì)于新手來說，這聽起來可能有點(diǎn)太復(fù)雜了。

國(guó)外一位大什么對(duì)Promises的解釋如下：“想象一下你是個(gè)孩子。你老媽向你保證，她下周會(huì)給你買一部新手機(jī)。”

你要到下周才能知道你是否能獲取那部手機(jī)。你老媽要么真的給你買了一個(gè)全新的手機(jī)，要么因?yàn)椴婚_心就不給你買。

這個(gè)就是一個(gè)Promise。一個(gè)Promise有三個(gè)狀態(tài)。分別是：

1. 鴻蒙官方戰(zhàn)略合作共建——HarmonyOS技術(shù)社區(qū)

2. Pending：你不知道你是否能得到那部手機(jī)

3. Fulfilled：老媽高興了，給你買了

4. Rejected：老娘不開森了，不給你買了

這個(gè)是我目前聽到，最快能理解 Promise 事例。

如果你還沒有開始學(xué)習(xí) Promise ，建議你這樣做。

Promise包含幾種非常有用的內(nèi)置方法。今天我們主要介紹這兩種方法。

• Promise.race()-與 ES6 一起發(fā)布

• Promise.any() -仍處于第4階段的提案中

Promise.race()

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)

參數(shù)

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拒絕

真實(shí)用例

現(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()

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);

參數(shù)

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í))  變成成功/失敗(resolved/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的值。

真實(shí)用例

從最快的服務(wù)器檢索資源

假設(shè)訪問我們網(wǎng)站的用戶可能來自全球各地。如果我們的服務(wù)器基于單個(gè)位置，那么響應(yīng)時(shí)間將根據(jù)每個(gè)用戶的位置而不同。但是如果我們有多個(gè)服務(wù)器，可以使用能夠產(chǎn)生最快響應(yīng)的服務(wù)器。在這種情況下，可以使用Promise.any()方法從最快的服務(wù)器接收響應(yīng)。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“怎么使用Promise.race()和Promise.any()”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!

網(wǎng)站題目：怎么使用Promise.race()和Promise.any()
轉(zhuǎn)載源于：http://www.chinadenli.net/article38/jogcsp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、網(wǎng)站收錄、網(wǎng)站營(yíng)銷、Google、微信小程序、小程序開發(fā)

廣告

聲明：本網(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)