Briser une chaîne Promise à l'intérieur de la boucle for

C'est beaucoup plus facile à faire avec la syntaxe async / await :

async function pro(arr) {
    const self = {req: {}, res: {}};
    for(const f of arr) await f.call(self);
    return self;
}

const x = function () {
  const self = this;
  return new Promise(resolve => {
    self.req = {key: "value"}
    resolve();
  })  
}

const y =  function () {
  const self = this;
  return new Promise((resolve, reject) => {
    console.log(self);
    reject("y failed");
  })
}

const z = function () {
  const self = this;
  return new Promise((resolve, reject) => {
  	console.log('failed');
  })
}

pro([x, y, z]).then((self) => {
  console.log('final',self);
})
.catch(e => {
  console.log('error', e);
});

async function pro(arr) {
    const self = {req: {}, res: {}};
    for(const f of arr) await f.call(self);
    return self;
}

Quelques petites choses: lorsque vous construisez votre chaîne de promesses à l'intérieur d'une boucle for, c'est tout ce qui se passe: la chaîne est construite. L'exécution de .then aura lieu au plus tôt dans la prochaine boucle d'événements. Je vais essayer d'illustrer:

var promiseChain = functionReturningPromise();
for(var i=0;i<3;i++){
  promiseChain = promiseChain.then(x=> {
    return anotherPromiseFunction(x);
  });
}

En fonction de ce que fait réellement functionReturningPromise , quelque chose s'est peut-être déjà produit à ce stade ... ou peut-être pas. Par exemple, nous avons peut-être commencé une fetch , ou peut-être lancé un WebWorker. Cependant, si nous avions un setTimeout imbriqué à l'intérieur de la première promesse, alors tout ce que nous avons fait a été de mettre le rappel setTimeout dans la file d'attente pour le prochain cycle de la boucle d'événements. Mais garanti à 100%, aucune fonction .then n'est encore exécutée. Cela vient plus tard, dans la prochaine boucle d'événements.

La prochaine boucle d'événements arrive et la promesse est résolue. Cela signifie que le prochain .then sera exécuté. Disons que cela échoue. À ce stade, parce que nous avons enchaîné les promesses ( promiseChain = promiseChain.then ), nous passons immédiatement au premier .catch (ou .then avec un deuxième paramètre) dans la chaîne, et tous les .then intervenant sont complètement ignorés sans être exécutés. Ou s'il n'y a pas de catch es, alors cette chaîne de promesse est terminée. Aucune pause nécessaire; c'est juste la façon dont les promesses fonctionnent.

Donc, si vous ajoutez simplement un .catch à la toute fin de la chaîne, vous êtes bon.

À propos de ça chose "boucle d'événement": Je recommande vraiment de regarder Jake Archibald: dans The Loop , de JSConf.Asia 2018.

Aussi à propos de await ... On dirait qu'il y a une certaine confusion sur son fonctionnement. Vous ne pouvez utiliser wait que dans une fonction async , vous ne pouvez donc jamais bloquer complètement l'exécution du thread avec un seul wait . Cela fonctionne comme le chaînage de .puis , juste du sucre syntaxique. Donc, @trincot a définitivement raison, vous serez beaucoup plus satisfait de cette syntaxe.

Voici une réponse alternative qui exécute simplement les promesses les unes après les autres, sauf si une promesse a été rejetée qui est ensuite arrêtée. Cela n'utilise pas await mais cela devrait vous donner une idée générale de la façon dont cela pourrait être fait sans lui, mais ce code a également été écrit très rapidement, ce n'est donc pas le code le plus optimisé.

const x = function() {
  return new Promise(resolve => {
    resolve('it resolved ma!');
  });
};

const y = function() {
  const self = this;
  return new Promise((resolve, reject) => {
    reject("reject");
  });
};

const z = function() {
  const self = this;
  return new Promise((resolve, reject) => {
    resolve("never gets executed");
  });
};

function runPromises(promises) {
  const results = [];
  let count = 0;
  const executePromise = i => {
    count++;
    return promises[i]()
      .then((response) => {
        results.push(response);
        if (count !== promises.length) {
          executePromise(count);
        }
      })
      .catch((e) => {
        results.push(e);
        console.log("stop right now, thank you very much");
      });
  };
  if (Array.isArray(promises)) {
    executePromise(count);
  }
  return results;
}

const results = runPromises([x, y, z]);
console.log(results);