如何使用Promise.race() 和 Promise.any() ?

 

自1996年發布以來，JS 一直在穩步改進。隨著ECMAScript版本的許多改進，最近的版本是ES2020。JS 的一個重要更新是Promise，在2015年,它以 ES6 的名義發布。

什麼是 Promise ?

MDN 上對 Promise 的定義：Promise 對象用於表示一個異步操作的最終完成 (或失敗)及其結果值。對於新手來說，這聽起來可能有點太複雜了。

國外一位大什麼對Promises的解釋如下：「想像一下你是個孩子。你老媽向你保證，她下周會給你買一部新手機。」

你要到下周才能知道你是否能獲取那部手機。你老媽要麼真的給你買了一個全新的手機，要麼因為不開心就不給你買。

這個就是一個Promise。一個Promise有三個狀態。分別是：

1. Pending：你不知道你是否能得到那部手機
2. Fulfilled：老媽高興了，給你買了
3. 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 是否已解決，而不管其被解決還是被拒絕。

語法

1. Promise.race(iterable) 

參數

iterable — 可迭代對象，類似 Array。iterable 對象實現Symbol.iterator方法。

返回值

一個待定的 Promise 只要給定的迭代中的一個promise解決或拒絕，就採用第一個promise的值作為它的值，從而異步地解析或拒絕(一旦堆棧為空)。

注意

因為參數接受iterable，所以我們可以傳遞一些值，比如基本值，甚至數組中的對象。在這種情況下，race方法將返回傳遞的第一個非 promise 對象。這主要是因為方法的行為是在值可用時(當 promise 滿足時)立即返回值。

此外，如果在iterable中傳遞了已經解決的Promise，則Promise.race()方法將解析為該值的第一個。如果傳遞了一個空的Iterable，則race方法將永遠處於待處理狀態。

事例

1. const promise1 = new Promise((resolve, reject) => { 
2.     setTimeout(resolve, 500, 'promise 1 resolved'); 
3. }); 
4.  
5. const promise2 = new Promise((resolve, reject) => { 
6.     setTimeout(reject, 100, 'promise 2 rejected'); 
7. }); 
8.  
9. const promise3 = new Promise((resolve, reject) => { 
10.     setTimeout(resolve, 200, 'promise 3 resolved') 
11. }); 
12.  
13. (async () => { 
14.     try { 
15.         let result = await Promise.race([promise1, promise2, promise3]); 
16.         console.log(result); 
17.     } catch (err) { 
18.         console.error(err); 
19.     } 
20. })(); 
21.   // 輸出- "promise 2 rejected" 
22.   // 儘管promise1和promise3可以解決，但promise2拒絕的速度比它們快。 
23.   // 因此Promise.race方法將以promise2拒絕 

真實用例

現在，你可能想知道，我們在實戰中何時 Promise.race() ?來看看。

在請求數據時，顯示加載動畫

使用加載動畫開發中是非常常見。當數據響應時間較長時，如果沒使用加載動畫，看起來就像沒有響應一樣。但有時，響應太快了，我們需要加載動畫時，增加一個非常小延遲時間，這樣會讓用戶覺得我是在經常請求過來的。要實現這一點，只需使用Promise.race()方法，如下所示。

1. function getUserInfo(user) { 
2.   return new Promise((resolve, reject) => { 
3.     // had it at 1500 to be more true-to-life, but 900 is better for testing 
4.     setTimeout(() => resolve("user data!"), Math.floor(900*Math.random())); 
5.   }); 
6. } 
7.  
8. function showUserInfo(user) { 
9.   return getUserInfo().then(info => { 
10.     console.log("user info:", info); 
11.     return true; 
12.   }); 
13. } 
14.  
15. function showSpinner() { 
16.   console.log("please wait...") 
17. } 
18.  
19. function timeout(delay, result) { 
20.   return new Promise(resolve => { 
21.     setTimeout(() => resolve(result), delay); 
22.   }); 
23. } 
24. Promise.race([showUserInfo(), timeout(300)]).then(displayed => { 
25.   if (!displayed) showSpinner(); 
26. }); 

**取消的 Promise **

有些情況下，我們需要取消 Promise，這時也可以藉助 Promise.race() 方法：

1. function timeout(delay) { 
2.   let cancel; 
3.   const wait = new Promise(resolve => { 
4.     const timer = setTimeout(() => resolve(false), delay); 
5.     cancel = () => { 
6.       clearTimeout(timer); 
7.       resolve(true); 
8.     }; 
9.   }); 
10.   wait.cancel = cancel; 
11.   return wait; 
12. } 
13.  
14.  
15. function doWork() { 
16.   const workFactor = Math.floor(600*Math.random()); 
17.   const work = timeout(workFactor); 
18.    
19.   const result = work.then(canceled => { 
20.     if (canceled) 
21.       console.log('Work canceled'); 
22.     else 
23.       console.log('Work done in', workFactor, 'ms'); 
24.     return !canceled; 
25.   }); 
26.   result.cancel = work.cancel; 
27.   return result; 
28. } 
29.  
30. function attemptWork() { 
31.   const work = doWork(); 
32.   return Promise.race([work, timeout(300)]) 
33.     .then(done => { 
34.       if (!done) 
35.         work.cancel(); 
36.       return (done ? 'Work complete!' : 'I gave up'); 
37.   }); 
38. } 
39.  
40. attemptWork().then(console.log); 

批處理請求，用於長時間執行

Chris Jensen 有一個有趣的race()方法用例。他曾使用Promise.race()方法批處理長時間運行的請求。這樣一來，他們可以保持並行請求的數量固定。

1. const _ = require('lodash') 
2.  
3. async function batchRequests(options) { 
4.     let query = { offset: 0, limit: options.limit }; 
5.  
6.     do { 
7.         batch = await model.findAll(query); 
8.         query.offset += options.limit; 
9.  
10.         if (batch.length) { 
11.             const promise = doLongRequestForBatch(batch).then(() => { 
12.                 // Once complete, pop this promise from our array 
13.                 // so that we know we can add another batch in its place 
14.                 _.remove(promises, p => p === promise); 
15.             }); 
16.             promises.push(promise); 
17.  
18.             // Once we hit our concurrency limit, wait for at least one promise to 
19.             // resolve before continuing to batch off requests 
20.             if (promises.length >= options.concurrentBatches) { 
21.                 await Promise.race(promises); 
22.             } 
23.         } 
24.     } while (batch.length); 
25.  
26.     // Wait for remaining batches to finish 
27.     return Promise.all(promises); 
28. } 
29.  
30. batchRequests({ limit: 100, concurrentBatches: 5 }); 

Promise.any()

Promise.any() 接收一個Promise可迭代對象，只要其中的一個 promise 成功，就返回那個已經成功的 promise 。如果可迭代對象中沒有一個 promise 成功(即所有的 promises 都失敗/拒絕)，就返回一個失敗的 promise 和AggregateError類型的實例，它是 Error 的一個子類，用於把單一的錯誤集合在一起。本質上，這個方法和Promise.all()是相反的。

注意!Promise.any() 方法依然是實驗性的，尚未被所有的瀏覽器完全支持。它當前處於 TC39 第四階段草案(Stage 4)

語法

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

事例

1. const promise1 = new Promise((resolve, reject) => { 
2.   setTimeout(reject, 100, 'promise 1 rejected'); 
3. }); 
4.  
5. const promise2 = new Promise((resolve, reject) => { 
6.   setTimeout(resolve, 400, 'promise 2 resolved at 400 ms'); 
7. }); 
8.  
9. const promise3 = new Promise((resolve, reject) => { 
10.   setTimeout(resolve, 700, 'promise 3 resolved at 800 ms'); 
11. }); 
12.  
13. (async () => { 
14.   try { 
15.     let value = await Promise.any([promise1, promise2, promise3]); 
16.     console.log(value); 
17.   } catch (error) { 
18.     console.log(error); 
19.   } 
20. })(); 
21.  
22. //Output - "promise 2 resolved at 400 ms" 

從上面代碼注意到Promise.any()主要關註解析的值。它會忽略在100毫秒時拒絕的promise1，並考慮在400毫秒後解析的promise2的值。

真實用例

從最快的伺服器檢索資源

假設訪問我們網站的用戶可能來自全球各地。如果我們的伺服器基於單個位置，那麼響應時間將根據每個用戶的位置而不同。但是如果我們有多個伺服器，可以使用能夠產生最快響應的伺服器。在這種情況下，可以使用Promise.any()方法從最快的伺服器接收響應。

我是小智，我們下期再見!

作者：Mahdhi Rezvi 譯者：前端小智 來源: medium

原文：https://blog.bitsrc.io/introduction-to-promise-race-and-promise-any-with-real-life-examples-9d8d1b9f8ec9

本文轉載自微信公眾號「大遷世界」，可以通過以下二維碼關注。轉載本文請聯繫大遷世界公眾號。

【編輯推薦】

【責任編輯：

武曉燕

TEL：[phone]】

點讚 0