⛓ 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.

Week 1: tech-track-dataset

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. Mocht je dit voorbeeld in de webpagina willen zien is hier de link: Tech track dataset chaining

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);
    });
};

Week 2: Spotify API chaining

Bij de volgende opdracht wilde ik ook graag chaining toepassen omdat ik hierbij op data MOET wachten om de volgende functie uit te kunnen voeren. Ik doe namelijk meerdere API calls en voor sommige heb je data nodig van de vorige omdat je deze anders niet kan uitvoeren. Op deze pagina leg ik alleen uit hoe de chaining is gedaan, mocht je meer willen lezen over de Spotify api klik hier en als je meer wil lezen hoe dit project werkt klik hier.

In de code hieronder staat spotifyProvider of cleanDataFunctions, dit zijn JavaScript classes die ik gebruik om functies te exporten/importeren als een soort modules.

 const getData = async () => {
    if (count === 0) setLoading(true);
    try {
      await spotifyProvider
        // hash.access_token is een global var die ik uit de url haal van de pagina, deze word vanuit spotify naar de applicatie geredirect
        .getCurrentPlayingTrack(hash.access_token)
        .then((player) => {
          // zet het player object in de state, alleen nog niet uitvoeren
          state.player = player;
          // geef player door naar dee volgende .then
          return player;
        })
        .then((res) => {
          // uit het vorige object heb ik de artist id nodig om de volgende endpoint aan te kunnen roepen, deze geef ik dus als parameter mee
          const artist = spotifyProvider.getArtistData(hash.access_token, res.item.artists[0].id);
          return artist;
        })
        .then((data) => {
          // in het artist object staan followers zonder seperator, dit is lastig te lezen dus ik wil dit opschonen
          let clean = cleanDataFunctions.integerSeperator(data);
          return clean;
        })
        .then((res) => {
          // zet de waardes van populariteit om in percentage
          let percentage = cleanDataFunctions.getPopularityPercentage(res);
          return percentage;
        })
        .then((percentage) => {
          // ik heb een switch case geschreven die op basis van de percentage waarde een emotie in het object zet
          let popularity = cleanDataFunctions.getPopularityEmotion(percentage);
          // zet het 'opgeschoonde' object in de state, nog niet uitvoeren
          state.artist = popularity;
          return popularity;
        });

      if (state.artist) {
        // deze functie zou eigenlijk in de chain moeten maar ik heb een error en nu helaas geen tijd meer om dit te fixen, dus ik doe het op 
        // deze manier.
        const relatedArtists = await spotifyProvider.getRelatedArtists(
          hash.access_token,
          state.player.item.artists[0].id
        );
        state.relatedArtists = relatedArtists;
      }
      // alles is uitgevoerd en opgeslagen in de state deze kunnen we nu uitvoeren zodat we de data kunnen laten zien.
      setState(state);
      if (!loading) setLoading(false);
    } catch (err) {
      // error handling zit nog niet in de frontend...
      setError(err.message)
      setLoading(false);
    }
  };