Fetch en promises gebruiken om content te downloaden via Javascript

Gepubliceerd op 30 september 2020 Leestijd : 2 minuten

Jaren geleden kwam Microsoft met XMLHttpRequest om in Javascript verbinding te maken met externe bronnen vanuit een script of een pagina. Het gebruik hiervan is niet heel moeilijk, maar oogt wel complex en rommelig. Je moet rekening houden met verschillende statuscodes en wachten op een antwoord. JQuery bood hiervoor een oplossing met .ajax (en .get, .post en .getJSON). Onder andere het gemak waarmee jQuery http-calls faciliteerde, zorgde ervoor dat deze library populair werd. Ondertussen is er echter een alternatief beschikbaar in native Javascript, namelijk fetch.

Fetch werkt eenvoudig:

var url = 'https://sigmasolutions.nl/';

var showTitle = function(text){
var container = document.createElement('html'); // Maak HTML element aan.
container.innerHTML = text; // Plaats de gedownloade tekst (=pagina) in het HTML-element.
console.log(container);

var title = container.querySelectorAll('head title')[0].text; // Je kan nu de gedownloade pagina doorzoeken met selectors.

console.log(title); //  Sigma Solutions: Online Business Partner | Sigma Solutions: Online Business Partner
};

fetch(url)
.then(response => response.text())
.then(showTitle);

Je geeft fetch een url en deze wordt aangeroepen. Als de data is opgehaald, dan kan je er iets mee doen. In bovenstaande voorbeeld wordt de data omgezet naar tekst en wanneer dat omzetten voltooid is, dan wordt de functie showTitle aangeroepen met de tekst als argument. Dit voorbeeld heb ik iets complexer gemaakt om te laten zien dat je hiermee ook pagina's kan ophalen en selectors kan gebruiken in de gedownloade pagina. Tevens toont het voorbeeld het gebruik van Promises.

Fetch geeft een Promise terug.

Then voert een functie uit wanneer de Promise voltooid is en geeft zelf ook weer een Promise terug. In onderstaande simpele voorbeeld zie je dat je deze promises dus kan chainen:

var url = 'https://sigmasolutions.nl/';

var showTitle = function(text){
// ...
        return {x: 1};
};

fetch(url)
.then(response => response.text())
.then(showTitle)
        .then(function(a, b, c){console.log(a, b, c); return 'Klaar'}) //console: {x: 1}, null, null
        .then(alert);

De arrow-functie response => response.text() voert de method text uit van response, wat een argument is dat wordt meegegeven door then. Als een arrow-functie een statement heeft met een returnwaarde, dan wordt dat de returnwaarde die de promise doorgeeft. In dit geval wordt de broncode van de opgehaalde pagina omgezet naar tekst.

ShowTitle is een functie met één argument en then maakt daar het resultaat van van de vorige Promise.

De volgende functies worden daarna uitgevoerd.