Comprendre les méthodes all(), race() et allSettled() dans Promise

À partir d'ES6, nous utilisons principalement Promise.all() et Promise.race() La proposition Promise.allSettled() a atteint le stade 4, elle fera donc partie de ECMAScript 2020.

1. Présentation

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

• Promise.all(iterable) renvoie une instance Promise, dans laquelle tous les iterable du paramètre promise sont "terminés ( résolus )" ou le paramètre ne contient pas promise, le rappel est terminé (résolution) ; s'il y a un échec (rejeté) dans le paramètre promise, le rappel de cette instance échoue (rejet), et la raison de l'échec est le premier a échoué promise Le résultat de

Promise.race(promesses : Iterable>) : Promise

• Promise.race(iterable) renvoie un qui sera résolu ou rejeté une fois qu'un promise dans l'itérateur est résolu ou rejeté. promisepromise

Promise.allSettled

(promesses : Iterable>) : Promise>>

La méthode Promise.allSettled()
• renvoie un où tous les donnés ont été résolus ou rejetés Après l'analyse, chaque objet décrit le résultat de chacun promise. promisepromisepromise
2. Révision : États promis

Étant donné une opération asynchrone qui renvoie , voici les états possibles de

 :

PromisePromiseen attente : Etat initial, ni état de réussite ni d'échec.

réalisé : signifie que l'opération s'est terminée avec succès.
• rejeté : signifie que l'opération a échoué.
• Réglé :
• Soit complété, soit rejeté.
Une fois atteint, son statut ne changera pas.
• PromisePromise

3. Qu'est-ce que la combinaison

Également connu sous le nom de mode partie-tout, il intègre des objets dans une structure arborescente. to Représente une hiérarchie de structures « partie-tout ». Le mode composition permet aux utilisateurs d'utiliser des objets uniques et des objets composites de manière cohérente. Il est basé sur deux fonctions :

Les fonctions primitives (abréviation : primitives) créent des blocs atomiques.

Les fonctions de composition (en abrégé : composition) combinent des atomes et/ou des composites pour former des composites.
• Pour JS Promises,

les fonctions primitives incluent :

,

• Promise.resolve()Fonctions combinées : Promise.reject(),
,
• Promise.all()Promise.race()Promise.allSettled()
4. Tapez la signature de Promise.all()

 :

Promise.all()

Promise.all

(promesses : Iterable>) : Promise>Statut de retour :

Exécution :

Si l'objet itérable entrant est vide, renverra de manière synchrone un statut terminé () de
. Promise.allSi tout ce qui est passé dans resolved devient terminé, ou s'il n'y a pas de promise dans l'itérable passé, le
renvoyé par promise devient terminé de manière asynchrone. promiseDans tous les cas, le résultat de l'état d'achèvement de Promise.all renvoyé par promise est un tableau qui contient toutes les valeurs de l'objet paramètre d'itération transmis (y compris les valeurs non promises).
Promise.allpromiseÉchec/Rejet :

Si l'un des entrants échoue (),
donne de manière asynchrone le résultat de l'échec à la fonction de rappel pour l'état d'échec, quel que soit de savoir si d'autres promise sont terminés. rejectedPromise.allVoici un exemple : promise

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

Que se passe-t-il si l'une des promesses est rejetée :

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

La figure suivante illustre le fonctionnement de

Promise.all()

4.1 Asynchronous.map() et Promise.all()

Les méthodes de conversion de tableau, telles que

,

, etc., sont utilisées pour les calculs synchrones. Par exemple,

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

.map() Que se passe-t-il si le rappel de .filter() est basé sur une fonction de

 ? En utilisant cette méthode, le résultat renvoyé par

est un tableau de .map(). Promise

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

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!