Fetch - De manier om informatie van een andere server op te halen

Fetch - JavaScript als hondje ;-)

Informatie van (andere) webservers haal je op via het fetch commando. Omdat het even kan duren voordat je data terug krijgt zit er in een fetch een Promise. Dit concept is wat lastig te begrijpen. Een Promise (of wel een belofte) is de belofte van de webbrowser dat hij iets gaat uitvoeren nadat de data binnen gekomen is. Hiervoor heb je in een fetch twee keer een .then. De .then wordt uigevoerd zodra er data binnengekomen is en die data verwerkt is.

fetch(<URL>)
.then(myData => myData.text())
.then(textData => showInConsole(textData));

function showInConsole(data) {
    console.log(data);
}

• URL is een daadwerkelijke locatie op internet, dit kan ook een bestand zijn. Een voorbeeld van zo een URL vind je op MBO-SD https://mbo-sd.nl/fetch-example-text
• .then eerste keer is de promise. Deze code wordt uitgevoerd nadat de reactie is ontvangen van de server in de fetch. De code hier zet de data om naar text.
• .then tweede keer is een vervolg op de promise nadat de eerste .then. In deze tweede .then gaan we de data uit de eerste keer verwerken in een functie.
• function showInConsole() wordt in de tweede .then uitgevoerd. Meer over functions leer je in het hoofdstuk over functions.

.text()

In het voorbeeld haal je met de URL van https://mbo-sd.nl/fetch-example-text een stukje text op. Klik maar eens op de link, dan zal je het zien.

De data die binnenkomt moeten we wel omzetten naar gewone text. Dit doe je door op de variabele die je gemaakt hebt, in ons voorbeeld myData de methode (function) uit te voeren van .toText()
Als je wilt kan je ook hele websites zoals https://nu.nl inladen.

.json()

Vaak krijg je echter geen text terug maar een JSON object. In dat geval moeten we de data niet omzetten met .text() maar met .json().

fetch(<URL>)
.then(myData => myData.json())
.then(jsonData => showInConsole(jsonData));

function showInConsole(jsonData) {
    console.log(jsonData);
}

Om dit te testen hebben we een voorbeeld URL gemaakt die in de basis JSON data, deze kan je zien op https://mbo-sd.nl/fetch-example-json.

De link geeft een array met 3 objecten terug, de kapiteinen van de USS Enterprise (Star Trek). Elk object heeft twee properties, een firstname en een lastname. Deze JSON data kan je verwerken door een loop te gebruiken door de array heen.

fetch('https://mbo-sd.nl/fetch-example-json')
.then(myData => myData.json())
.then(jsonData => showInConsole(jsonData));

function showInConsole(captainsArray) {
    for (let i = 0; i < captainsArray.length; i++) {
        const captain = captainsArray[i]; //Get the correct object-data
        console.log('Captains firstname ' + captain.firstname);
        console.log('Captains lastname ' + captain.lastname);
    }
}

Bij veel verbindingen met een API krijg je veelal JSON data terug (zie ook het hoofdstuk over JSON).

API - Application Programming Interface

Zoals boven al geschreven is werken we met JavaScript met data van (servers). Het programmeren met een (andere) server noemen we een API ofwel een Application Programming Interface. Het is een standaard manier (de vormen zijn afgesproken) hoe je tussen een webbrowser en een server of een server en een server gecommuniceerd wordt.

Fetch - POST

Fetch haalt standaard data voor je op en maakt gebruik van GET. Soms wil je echter niet iets ophalen maar iets versturen. Hiervoor kun je POST gebruiken. Hieronder vind je een code voorbeeld hoe je data kunt versturen naar een url. Het onderstaande voorbeeld laat zien hoe je een gebruiker kunt toevoegen.

            
//met querySelector halen we de verschillende onderdelen op van het HTML formulier.
const emailInput = document.querySelector('.email-input');
const passwordInput = document.querySelector('.password-input');
const submitButton = document.querySelector('.submit-button');

//we koppelen een event listener aan de submit knop om ervoor te zorgen dat de POST wordt uitgevoerd bij het klikken op de knop
submitButton.addEventListener('click', function (e) {
    //met preventDefault stoppen we het default submitten van het HTML formulier (we voeren zelf de POST uit)
    e.preventDefault();

    //we lezen de waarden uit van het formulier
    const email = emailInput.value;
    const password = passwordInput.value;

    (async () => {
        //we voeren de fetch uit naar de url /user-add, gebruiken de POST methode en gaan json versturen in de body
        const rawResponse = await fetch('/user-add', {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ email: email, password: password })
        });
        //het antwoord wat we van de server terugkrijgen zetten we om naar een JavaScript object met json();
        const content = await rawResponse.json();

        //in het object wat we terugkrijgen verwachten we de property userAdded die ofwel true of false is
        if(content.userAdded){
            //als de waarde true is dan is de gebruiker toegevoegd
            alert('Gebruiker toegevoegd');
        } else{
            //als de waarde false is dan is er iets misgegaan met het toevoegen
            alert('Niet gelukt om de gebruiker toe te voegen');
        }

    })();

});