了解Promise中的all()、race()、allSettled()方法

從ES6 開始，我們大都使用的是Promise.all()和Promise.race()，Promise. allSettled() 提案已經到第4階段，因此將會成為ECMAScript 2020的一部分。

1.概述

Promise.all(promises: Iterable>): Promise> ;

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

Promise.race (promises: Iterable>): Promise

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

Promise.allSettled(promises: Iterable>): Promise>>

• 如果

#'

##Promise.allSettled()方法傳回一個promise

，該

promise
• 在所有給定的
promise
• 已被解析或被拒絕後解析，並且每個物件都描述每個
promise
• 的結果。
• 2. 回顧: Promise 狀態
給定一個回傳

Promise

的非同步操作，以下是Promise

的可能狀態：

pending: 初始狀態，既不是成功，也不是失敗狀態。

fulfilled: 意味著操作成功完成。

rejected: 意味著操作失敗。
• Settled：
• Promise
要嘛完成，要嘛被拒絕。

Promise

一旦達成，它的狀態就不再改變。

• 3.什麼是組合
• #又稱部分-整體模式，將物件整合成樹狀結構以表示「部分整體」的層次結構。組合模式使得使用者對單一物件和組合物件的使用具有一致性，它基於兩種函數：基元函數(簡短:基元)建立原子塊。 組合函數（簡稱：組合）將原子和/或複合件組合在一起以形成複合件。

對JS 的Promises 來說

基元函數包含:

Promise.resolve()、Promise.reject()

• 組合函數：Promise.all(), Promise.race(), Promise.allSettled()

#4. Promise.all()

Promise.all()的型別簽章:
Promise.all(promises: Iterable>): Promise>
返回情況：
完成（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(promises: Iterable>): Promise

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(promises: Iterable<Promise>)
  : Promise<Array>>

它返回一个Array的Promise，其元素具有以下类型特征：

    type SettlementObject<T> = FulfillmentObject<T> | RejectionObject;
    
    interface FulfillmentObject<T> {
      status: &#39;fulfilled&#39;;
      value: T;
    }
    
    interface RejectionObject {
      status: &#39;rejected&#39;;
      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']);
      });

8.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]);
    }

8.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行中，对每个小任务得到的结果进行汇总。

英文原文：https://2ality.com/2019/08/promise-combinators.html

更多编程相关知识，请访问：编程教学！！

以上是了解Promise中的all()、race()、allSettled()方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！