Fetch en promises gebruiken om content te downloaden via Javascript header image

Fetch en promises gebruiken om content te downloaden via Javascript

woensdag 30 september 2020 ·Leestijd: 2 minuten
contacteer auteur:
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

B2B E-commerce… Wakker worden!
Geschreven door
op dinsdag 28 juni 2022
Veel B2B-bedrijven in blijven hangen in; nauwelijks vindbare, verouderde B2B e-commerce websites met minimale conversiemogelijkheden en een betreurenswaardige gebruikerservaring. Zonde!
B2B Leadgeneratie: Alles wat je altijd al wilde weten!
Geschreven door
op maandag 27 juni 2022
B2B online leadgeneratie is het proces van het identificeren van de ideale klanten voor uw product of dienst, en hen vervolgens overhalen tot aankoop. Het is een essentiële activiteit voor B2B sales- en marketingteams.
Wat maakt een B2B webshop succesvol?
Geschreven door
op zondag 26 juni 2022
De opmars van de B2B webshop neemt toe. Regelmatig krijgen wij de vraag of er een groot verschil is tussen een consumentgerichte webshop en een puur B2B gedreven webshop. In deze blog leggen wij u uit hoe een B2B webshop succesvol kan zijn en worden.
Open Nieuwsbrief Inschrijving Footer

E-book

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

Download het E-book â€º