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

  • Relationele data importeren in SQL vanuit Excel

    Geschreven door: op maandag 29 maart 2021

    In SQL Server kan je snel data importeren vanuit Excel-bestanden met behulp van OPENROWSET. Deze functie impoteert een werkblad in het Excel-bestand en plaatst de inhoud in een query, die je kan SEL ...

    Bekijk het artikel »
  • Google Page Experience

    Geschreven door: op vrijdag 26 maart 2021

    Wat is Google Page Experience?Voor de nieuwe update van Google die de algoritme gaat bepalen staat de Page Experience centraal, dit staat voor het centraal stellen van de gebruikerservaring.Zoals de ...

    Bekijk het artikel »
  • Verbeter je technische seo met behulp van SEMrush

    Geschreven door: op vrijdag 26 maart 2021

    Sigma Solutions gebruikt SEMrush om te monitoren wat de SEO staat van de website is van onze klanten. Dit systeem geeft meldingen wanneer er verbeteringen gevonden worden om beter te ranken in de zoek ...

    Bekijk het artikel »
Bel 072 5345 888
Meer dan 40 bedrijven vertrouwen op ons
Bekijk al onze tevreden klanten ›
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 »

E-book

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

Download het E-book ›