⛓ Chaining

Chaining functions

Soms moet je bij programmeren meerdere functies in een bepaalde volgorde uitvoeren om je gewenste doel te behalen, om dit voor elkaar te krijgen kan je gebruik maken van chaining. Je kan het in stappen opschrijven als volgt:

• Als eerste doe dit
• then doe dit met die data en geef het nieuwe object door
• then doe dit met het nieuwe object
• then dit is je opgeschoonde data

Het voordeel van het op deze manier doen is dat de functie wacht op data van een andere functie terwijl als je dit afzonderlijk zou uitvoeren de ene functie misschien sneller klaar kan zijn dan de andere, hierdoor gaat het een beetje stroef lopen en krijg je niet de gewenste output.

Hieronder is een voorbeeld van chaining die ik heb toegepast in 1 van mijn codes, in de code comments leg ik uit wat er per stap gebeurd.

const parseData = async () => {
// hier maak ik een nieuwe promise aan, een promise is eigenlijk een belofte voor de toekomst. We verwachten dus dat er data terugkomt of een 
// error mocht er iets misgaan
  return new Promise((resolve, reject) => {
    fetch(url).then((response) => {
// hier resolve (return) ik de data indien deze statuscode 200 heeft, resolve is een promise parameter
      if (response.ok) resolve(response.json());
      else {
// hier reject ik de promise mocht het niet gelukt zijn, hier stopt de chain dan ook
        reject(new Error("Er is iets misgegaan in de api"));
        window.alert("Helaas is er iets misgegaan...");
      }
    });
  })
    .then((res) => {
      // res is het object dat de resolve door heeft gegeven aan .then
      // functie om de antwoorden uit de vragen te filteren
      let answers = getAnswersMethod(res);
      // als dit gelukt is geef het 'nieuwe' object door
      return answers;
    })
    .then((colors) => {
      // colors is nu het answers object uit de vorige .then deze data is nu gefilterd en hiermee gaan we verder
      // een functie om de kleur naam (het antwoord) te koppelen aan een hex kleurcode
      let hexCodes = connectColorToHex(colors);
      console.table(hexCodes);
      return hexCodes;
    })
    .then((table) => {
      // dit is de laatste stap in de chain en hier heb ik de data die ik nodig heb om het doel te bereiken, namelijk een tabel maken met de 
      // hexcodes
      let colorTable = createColorTable(table);
    });
};