Het probleem van promise hell in JavaScript

Je weet al dat promises zijn gemaakt om het probleem van callback hell op te lossen. Echter, met de tijd bleek dat promises ook complexe code kunnen voortbrengen. Dit probleem werd naar analogie promise hell genoemd.

Laten we dit probleem bekijken aan de hand van voorbeelden code. Stel we hebben een functie getSmth, die een parameter ontvangt en een resultaat teruggeeft afhankelijk van deze parameter:

javascriptfunction getSmth(num) {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve(num * num), 1000)
  });
}

In dit geval simuleren we een nuttige operatie (bijvoorbeeld het ophalen van gegevens van een server). Als simulatie geven we simpelweg een getal door als parameter en geven we na een seconde het kwadraat van dat getal terug.

Laten we nu onze functie gebruiken getSmth binnen een andere functie:

javascriptfunction func() {
  getSmth(2).then(res => {
    console.log(res); // geeft 4 weer
  });
}

func();

Eerste probleem

Veel opeenvolgende constructies then bemoeilijken het begrijpen van de code:

javascriptfunction func(){
  getSmth(2).then(res1 => {
    // doen we iets
  }).then(res2 => {
    // doen we iets
  }).then(res3 => {
    // doen we iets
  }).then(res4 => {
    // doen we iets
  }).then(res5 => {
    // doen we iets
  }).then(res6 => {
    // doen we iets
  });
}

func();

Tweede probleem

Er is ook een probleem van een andere aard. Stel dat we nu onze functie twee keer willen gebruiken, en vervolgens de resultaten optellen. Als resultaat krijgen we deze code:

javascriptfunction func() {
  getSmth(2).then(res1 => {
    getSmth(3).then(res2 => {
      console.log(res1 + res2); // geeft 13 weer
    });
  });
}

func();

Doet al denken aan callback hell, nietwaar? Laten we nog één functieaanroep toevoegen - de code wordt nog erger:

javascriptfunction func() {
  getSmth(2).then(res1 => {
    getSmth(3).then(res2 => {
      getSmth(4).then(res3 => {
        console.log(res1 + res2 + res3);
      });
    });
  });
}

func();

We kunnen natuurlijk gebruikmaken van Promise.all:

javascriptfunction func() {
  Promise.all([getSmth(2), getSmth(3), getSmth(4)]).then(res => {
    console.log(res[0] + res[1] + res[2]);
  });
}

func();

Maar, hebben we hetzelfde gekregen? Nee! In het eerste geval wacht elke nieuwe functie op de voltooiing van de vorige promise, terwijl in het tweede geval - alle promises gelijktijdig worden uitgevoerd. Dit verschil zal essentieel zijn in het geval wanneer we in de volgende functie de aanroep van de vorige wil doorgeven:

javascriptfunction func() {
  getSmth(2).then(res1 => {
    getSmth(res1).then(res2 => {
      getSmth(res2).then(res3 => {
        console.log(res3);
      });
    });
  });
}

func();