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

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

微信搜尋【大遷世界】, 我會第一時間和你分享前端行業趨勢，學習途徑等等。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。

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

什麼是 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()方法從最快的伺服器接收響應。

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

程式碼部署後可能存在的BUG沒法實時知道，事後為了解決這些BUG，花了大量的時間進行log 除錯，這邊順便給大家推薦一個好用的BUG監控工具 Fundebug。

原文：https://blog.bitsrc.io/introd...

交流

有夢想，有乾貨，微信搜尋 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。

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

什麼是 Promise ？

Promise.race()

語法

引數

返回值

注意

事例

真實用例

Promise.any()

語法

引數

返回值

說明

事例

真實用例

交流

相關文章