Promise 中的三兄弟 .all(), .race(), .allSettled()

時間  2019-11-07
標籤 promise 兄弟 race allsettled 简体版
原文   原文鏈接
阿里雲最近在作活動，低至2折，有興趣能夠看看：
https://promotion.aliyun.com/...

爲了保證的可讀性，本文采用意譯而非直譯。html

從ES6 開始，咱們大都使用的是 Promise.all()和Promise.race()，Promise.allSettled() 提案已經到第4階段，所以將會成爲ECMAScript 2020的一部分。前端

1.概述

Promise.all<T>(promises: Iterable<Promise<T>>): Promise<Array<T>>git

  • Promise.all(iterable) 方法返回一個 Promise 實例，此實例在 iterable 參數內全部的 promise 都「完成（resolved）」或參數中不包含 promise 時回調完成（resolve）；若是參數中 promise 有一個失敗（rejected），此實例回調失敗（reject），失敗緣由的是第一個失敗 promise 的結果

Promise.race<T>(promises: Iterable<Promise<T>>): Promise<T>github

  • Promise.race(iterable) 方法返回一個 promise，一旦迭代器中的某個promise解決或拒絕，返回的 promise就會解決或拒絕。

Promise.allSettled<T>(promises: Iterable<Promise<T>>): Promise<Array<SettlementObject<T>>>編程

  • Promise.allSettled()方法返回一個promise，該promise在全部給定的promise已被解析或被拒絕後解析，而且每一個對象都描述每一個promise的結果。

回顧: Promise 狀態

給定一個返回Promise的異步操做，如下這些是Promise的可能狀態：後端

  • pending: 初始狀態，既不是成功，也不是失敗狀態。
  • fulfilled: 意味着操做成功完成。
  • rejected: 意味着操做失敗。
  • Settled： Promise要麼被完成，要麼被拒絕。Promise一旦達成，它的狀態就再也不改變。

clipboard.png

3.什麼是組合

又稱部分-總體模式，將對象整合成樹形結構以表示「部分總體」的層次結構。組合模式使得用戶對單個對象和組合對象的使用具備一致性，它基於兩種函數：數組

  • 基元函數(簡短:基元)建立原子塊。
  • 組合函數（簡稱：組合）將原子和/或複合件組合在一塊兒以造成複合件。

對於 JS 的 Promises 來講promise

  • 基元函數包括:Promise.resolve()、Promise.reject()
  • 組合函數：Promise.all(), Promise.race(), Promise.allSettled()

4. Promise.all()

Promise.all()的類型簽名:安全

  • Promise.all<T>(promises: Iterable<Promise<T>>): Promise<Array<T>>

返回狀況：併發

完成（Fulfillment）：
若是傳入的可迭代對象爲空，Promise.all 會同步地返回一個已完成（resolved）狀態的promise。
若是全部傳入的 promise 都變爲完成狀態，或者傳入的可迭代對象內沒有 promise，Promise.all 返回的 promise 異步地變爲完成。
在任何狀況下，Promise.all 返回的 promise 的完成狀態的結果都是一個數組，它包含全部的傳入迭代參數對象的值（也包括非 promise 值）。

失敗/拒絕（Rejection）：
若是傳入的 promise 中有一個失敗（rejected），Promise.all 異步地將失敗的那個結果給失敗狀態的回調函數，而無論其它 promise 是否完成。

來個例子：

const promises = [
  Promise.resolve('a'),
  Promise.resolve('b'),
  Promise.resolve('c'),
];
Promise.all(promises)
  .then((arr) => assert.deepEqual(
    arr, ['a', 'b', 'c']
  ));

若是其中的一個 promise 被拒絕，那麼又是什麼狀況：

const promises = [
  Promise.resolve('a'),
  Promise.resolve('b'),
  Promise.reject('ERROR'),
];
Promise.all(promises)
  .catch((err) => assert.equal(
    err, 'ERROR'
  ));

下圖說明Promise.all()是如何工做的

這須要有數字電路的知識才能看得懂哦

4.1 異步 .map() 與 Promise.all()

數組轉換方法，如.map()、.filter()等，用於同步計算。例如

function timesTwoSync(x) {
  return 2 * x;
}
const arr = [1, 2, 3];
const result = arr.map(timesTwoSync);
assert.deepEqual(result, [2, 4, 6]);

若是.map()的回調是基於Promise的函數會發生什麼？ 使用這種方式 .map()返回的的結果是一個Promises數組。

Promises數組不是普通代碼可使用的數據，但咱們能夠經過Promise.all()來解決這個問題：它將Promises數組轉換爲Promise，並使用一組普通值數組來實現。

function timesTwoAsync(x) {
  return new Promise(resolve => resolve(x * 2));
}
const arr = [1, 2, 3];
const promiseArr = arr.map(timesTwoAsync);
Promise.all(promiseArr)
  .then(result => {
    assert.deepEqual(result, [2, 4, 6]);
  });

更實際工做上關於 .map()示例

接下來，我們使用.map()和Promise.all()從Web下載文件。 首先，我們須要如下幫助函數：

function downloadText(url) {
  return fetch(url)
    .then((response) => { // (A)
      if (!response.ok) { // (B)
        throw new Error(response.statusText);
      }
      return response.text(); // (C)
    });
}

downloadText()使用基於Promise的fetch API 以字符串流的方式下載文件：

  • 首先，它異步檢索響應（第A行）。
  • response.ok（B行）檢查是否存在「找不到文件」等錯誤。
  • 若是沒有錯誤，使用.text()(第C行)以字符串的形式取回文件的內容。

在下面的示例中，我們 下載了兩個文件

const urls = [
  'http://example.com/first.txt',
  'http://example.com/second.txt',
];

const promises = urls.map(
  url => downloadText(url));

Promise.all(promises)
  .then(
    (arr) => assert.deepEqual(
      arr, ['First!', 'Second!']
    ));

Promise.all()的一個簡版實現

function all(iterable) {
  return new Promise((resolve, reject) => {
    let index = 0;
    for (const promise of iterable) {
      // Capture the current value of `index`
      const currentIndex = index;
      promise.then(
        (value) => {
          if (anErrorOccurred) return;
          result[currentIndex] = value;
          elementCount++;
          if (elementCount === result.length) {
            resolve(result);
          }
        },
        (err) => {
          if (anErrorOccurred) return;
          anErrorOccurred = true;
          reject(err);
        });
      index++;
    }
    if (index === 0) {
      resolve([]);
      return;
    }
    let elementCount = 0;
    let anErrorOccurred = false;
    const result = new Array(index);
  });
}

5. Promise.race()

Promise.race()方法的定義：

Promise.race<T>(promises: Iterable<Promise<T>>): Promise<T>

Promise.race(iterable) 方法返回一個 promise，一旦迭代器中的某個promise解決或拒絕，返回的 promise就會解決或拒絕。來幾個例子，瞧瞧：

const promises = [
  new Promise((resolve, reject) =>
    setTimeout(() => resolve('result'), 100)), // (A)
  new Promise((resolve, reject) =>
    setTimeout(() => reject('ERROR'), 200)), // (B)
];
Promise.race(promises)
  .then((result) => assert.equal( // (C)
    result, 'result'));

在第 A 行，Promise 是完成狀態 ，因此 第 C 行會執行（儘管第 B 行被拒絕）。

若是 Promise 被拒絕首先執行，在來看看狀況是嘛樣的：

const promises = [
  new Promise((resolve, reject) =>
    setTimeout(() => resolve('result'), 200)),
  new Promise((resolve, reject) =>
    setTimeout(() => reject('ERROR'), 100)),
];
Promise.race(promises)
  .then(
    (result) => assert.fail(),
    (err) => assert.equal(
      err, 'ERROR'));

注意，因爲 Promse 先被拒絕，因此 Promise.race() 返回的是一個被拒絕的 Promise

這意味着Promise.race（[]）的結果永遠不會完成。

下圖演示了Promise.race()的工做原理：

這須要有數字電路的知識才能看得懂哦

Promise.race() 在 Promise 超時下的狀況

在本節中，咱們將使用Promise.race()來處理超時的 Promise。 如下輔助函數:

function resolveAfter(ms, value=undefined) {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve(value), ms);
  });
}

resolveAfter() 主要作的是在指定的時間內，返回一個狀態爲 resolve 的 Promise，值爲爲傳入的 value

調用上面方法：

function timeout(timeoutInMs, promise) {
  return Promise.race([
    promise,
    resolveAfter(timeoutInMs,
      Promise.reject(new Error('Operation timed out'))),
  ]);
}

timeout() 返回一個Promise，該 Promise 的狀態取決於傳入 promise 狀態 。

其中 timeout 函數中的 resolveAfter(timeoutInMs, Promise.reject(new Error('Operation timed out')) ，經過 resolveAfter 定義可知，該結果返回的是一個被拒絕狀態的 Promise。

再來看看timeout(timeoutInMs, promise)的運行狀況。若是傳入promise在指定的時間以前狀態爲完成時，timeout 返回結果就是一個完成狀態的 Promise,能夠經過.then的第一個回調參數處理返回的結果。

timeout(200, resolveAfter(100, 'Result!'))
  .then(result => assert.equal(result, 'Result!'));

相反，若是是在指定的時間以後完成，剛 timeout 返回結果就是一個拒絕狀態的 Promise,從而觸發catch方法指定的回調函數。

timeout(100, resolveAfter(2000, 'Result!'))
  .catch(err => assert.deepEqual(err, new Error('Operation timed out')));

重要的是要了解「Promise 超時」的真正含義：

  1. 若是傳入入Promise 較到的獲得解決，其結果就會給返回的 Promise。
  2. 若是沒有足夠快獲得解決，輸出的 Promise 的狀態爲拒絕。

也就是說，超時只會阻止傳入的Promise，影響輸出 Promise（由於Promise只能解決一次）， 但它並無阻止傳入Promise的異步操做。

5.2 Promise.race() 的一個簡版實現

如下是 Promise.race()的一個簡化實現(它不執行安全檢查)

function race(iterable) {
  return new Promise((resolve, reject) => {
    for (const promise of iterable) {
      promise.then(
        (value) => {
          if (settlementOccurred) return;
          settlementOccurred = true;
          resolve(value);
        },
        (err) => {
          if (settlementOccurred) return;
          settlementOccurred = true;
          reject(err);
        });
    }
    let settlementOccurred = false;
  });
}

6.Promise.allSettled()

「Promise.allSettled」這一特性是由Jason Williams，Robert Pamely和Mathias Bynens提出。

promise.allsettle()方法的定義：

  • Promise.allSettled<T>(promises: Iterable<Promise<T>>)
    : Promise<Array<SettlementObject<T>>>

它返回一個Array的Promise，其元素具備如下類型特徵：

type SettlementObject<T> = FulfillmentObject<T> | RejectionObject;

interface FulfillmentObject<T> {
  status: 'fulfilled';
  value: T;
}

interface RejectionObject {
  status: 'rejected';
  reason: unknown;
}

Promise.allSettled()方法返回一個promise，該promise在全部給定的promise已被解析或被拒絕後解析，而且每一個對象都描述每一個promise的結果。

舉例說明, 好比各位用戶在頁面上面同時填了3個獨立的表單, 這三個表單分三個接口提交到後端, 三個接口獨立, 沒有順序依賴, 這個時候咱們須要等到請求所有完成後給與用戶提示表單提交的狀況

在多個promise同時進行時我們很快會想到使用Promise.all來進行包裝, 可是因爲Promise.all的短路特性, 三個提交中若前面任意一個提交失敗, 則後面的表單也不會進行提交了, 這就與我們需求不符合.

Promise.allSettled跟Promise.all相似, 其參數接受一個Promise的數組, 返回一個新的Promise, 惟一的不一樣在於, 其不會進行短路, 也就是說當Promise所有處理完成後咱們能夠拿到每一個Promise的狀態, 而無論其是否處理成功.

下圖說明promise.allsettle()是如何工做的

這須要有數字電路的知識才能看得懂哦

6.1 Promise.allSettled() 例子

這是Promise.allSettled() 使用方式快速演示示例

Promise.allSettled([
  Promise.resolve('a'),
  Promise.reject('b'),
])
.then(arr => assert.deepEqual(arr, [
  { status: 'fulfilled', value:  'a' },
  { status: 'rejected',  reason: 'b' },
]));

6.2 Promise.allSettled() 較複雜點的例子

這個示例相似於.map()和Promise.all()示例(咱們從其中借用了downloadText()函數):咱們下載多個文本文件，這些文件的url存儲在一個數組中。可是，這一次，我們不但願在出現錯誤時中止，而是但願繼續執行。Promise.allSettled()容許我們這樣作：

const urls = [
  'http://example.com/exists.txt',
  'http://example.com/missing.txt',
];

const result = Promise.allSettled(
  urls.map(u => downloadText(u)));
result.then(
  arr => assert.deepEqual(
    arr,
    [
      {
        status: 'fulfilled',
        value: 'Hello!',
      },
      {
        status: 'rejected',
        reason: new Error('Not Found'),
      },
    ]
));

6.3 Promise.allSettled() 的簡化實現

這是promise.allsettle()的簡化實現(不執行安全檢查)

function allSettled(iterable) {
  return new Promise((resolve, reject) => {
    function addElementToResult(i, elem) {
      result[i] = elem;
      elementCount++;
      if (elementCount === result.length) {
        resolve(result);
      }
    }

    let index = 0;
    for (const promise of iterable) {
      // Capture the current value of `index`
      const currentIndex = index;
      promise.then(
        (value) => addElementToResult(
          currentIndex, {
            status: 'fulfilled',
            value
          }),
        (reason) => addElementToResult(
          currentIndex, {
            status: 'rejected',
            reason
          }));
      index++;
    }
    if (index === 0) {
      resolve([]);
      return;
    }
    let elementCount = 0;
    const result = new Array(index);
  });
}

7. 短路特性

Promise.all() 和 romise.race() 都具備 短路特性

  • Promise.all()： 若是參數中 promise 有一個失敗（rejected），此實例回調失敗（reject）

Promise.race()：若是參數中某個promise解決或拒絕，返回的 promise就會解決或拒絕。

8.併發性和 Promise.all()

8.1 順序執行與併發執行

考慮下面的代碼：

asyncFunc1()
  .then(result1 => {
    assert.equal(result1, 'one');
    return asyncFunc2();
  })
  .then(result2 => {
    assert.equal(result2, 'two');
  });

使用.then()順序執行基於Promise的函數：只有在 asyncFunc1()的結果被解決後纔會執行asyncFunc2() 。

而 Promise.all() 是併發執行的

Promise.all([asyncFunc1(), asyncFunc2()])
  .then(arr => {
    assert.deepEqual(arr, ['one', 'two']);
  });

9.2 併發技巧：關注操做什麼時候開始

肯定併發異步代碼的技巧:關注異步操做什麼時候啓動，而不是如何處理它們的Promises。

例如，下面的每一個函數都同時執行asyncFunc1()和asyncFunc2()，由於它們幾乎同時啓動。

function concurrentAll() {
  return Promise.all([asyncFunc1(), asyncFunc2()]);
}

function concurrentThen() {
  const p1 = asyncFunc1();
  const p2 = asyncFunc2();
  return p1.then(r1 => p2.then(r2 => [r1, r2]));
}

另外一方面，如下兩個函數依次執行asyncFunc1()和asyncFunc2(): asyncFunc2()僅在asyncFunc1()的解決以後才調用。

function sequentialThen() {
  return asyncFunc1()
    .then(r1 => asyncFunc2()
      .then(r2 => [r1, r2]));
}

function sequentialAll() {
  const p1 = asyncFunc1();
  const p2 = p1.then(() => asyncFunc2());
  return Promise.all([p1, p2]);
}

9.3 Promise.all() 與 Fork-Join 分治編程

Promise.all() 與併發模式「fork join」鬆散相關。重溫一下我們前面的一個例子：

Promise.all([
    // (A) fork
    downloadText('http://example.com/first.txt'),
    downloadText('http://example.com/second.txt'),
  ])
  // (B) join
  .then(
    (arr) => assert.deepEqual(
      arr, ['First!', 'Second!']
    ));
  • Fork：在A行中，分割兩個異步任務並同時執行它們。
  • Join：在B行中，對每一個小任務獲得的結果進行彙總。

代碼部署後可能存在的BUG無法實時知道，過後爲了解決這些BUG，花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。

交流

乾貨系列文章彙總以下，以爲不錯點個Star，歡迎 加羣 互相學習。

https://github.com/qq44924588...

我是小智，公衆號「大遷世界」做者，對前端技術保持學習愛好者。我會常常分享本身所學所看的乾貨，在進階的路上，共勉！

關注公衆號，後臺回覆福利，便可看到福利，你懂的。

clipboard.png

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程