Fetch en promises gebruiken om content te downloaden via Javascript

Geschreven door: op woensdag 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.
 

Andere blogartikelen

Bel 072 5345 888
Meer dan 40 bedrijven vertrouwen op ons
Bekijk al onze tevreden klanten ›
Onze Middelen en Technologieën
Lees meer over onze expertise op ons blog ›
Op de hoogte blijven?

Meld u aan voor de gratis nieuwsbrief om op de hoogte te blijven van onze activiteiten

E-book

Zo wordt uw website een lead generator:
In 3 stappen uw website van visitekaartje naar salesfunnel

Download het E-book »

E-book

Zo wordt uw website een lead generator 
In 3 stappen uw website van visitekaartje naar salesfunnel

Download het E-book ›