Promises Flashcards
- Wat is het verschil tussen synchronous code en asynchronous code?
Synchronous code is code die lijn per lijn wordt uitgevoerd in de volgorde waarin het voorkomt in het programma. Dit kan nadelig zijn voor de performantie van het programma in het geval dat een bepaalde regel code er lang over doet om uitgevoerd te worden.
Asynchronous code is code dat in de achtergrond kan uitgevoerd worden zonder dat de uitvoer van het main programma op hold gezet wordt.
Wat is AJAX en wat kunnen we er mee doen?
AJAX staat voor Asynchronous Javascript And XML dat ons toelaat om met servers te communiceren op een asynchrone manier. Onder communicatie verstaan we dan vooral het verzoeken en versturen van data van en naar een server (Denk hierbij aan GET, POST, PATCH, DELETE). AJAX verzoeken gebeuren dynamisch, wat wiit zeggen dat het niet nodig is om de webbrowser te ‘refreshen’ om een verzoek te versturen en af te handelen.
Wat is een server API
Wanneer we een request sturen naar de server met AJAX, zal deze request afgehandeld worden door een server API. Deze API zal ons de verzochte data terug sturen.
Een API (Application programming Interface) is een stuk software dat gebruikt wordt om met een ander stuk software te communiceren.
Wat zijn de twee API data formaten?
XML en JSON
XML wordt vandaag de dag echter nog raar of zelden gebruikt. In de plaats daarvan wordt het JSON formaat gebruikt om data van en naar servers te versturen. Dit verandert echter niets aan de naam AJAX.
In javascript zijn er verschillende manieren om een AJAX call te doen. De oudste manier is via de XML HTTP request function. Illustreer Hoe je via deze functie een AJAX call kan uitvoeren?
const request = new XMLHttpRequest();
request.open(‘GET’, ‘https://restcountries.com/rest/v2/name/belgium’);
request.send();
request.addEventListener(‘load’, function () {
const data = JSON.parse(this.responseText);
console.log(data);
});
uitleg:
1. Eerst maken we een XML HTTP request aan
2. Dan openen we het request
- eerste parameter: request type
- tweede parameter: de url waarnaar request wordt verstuurd
3. Dan verzenden we het. Eens verzonden wordt het verzoek op de achtergrond afgehandeld.
4. Eens het request is afgehandeld en de nodige data is verkregen, zal de eventhandler worden opgeorepen
- this zal verwijzen naar het huidige request
- responseText bevat het antwoord van de AJAX verzoek. Deze eigenschap zal geïnitialiseerd worden van zodra de verzochte data is aangekomen.
- De data dat we krijgen zal in de vorm van een string zijn. We zetten deze om in een array van objecten met de JSON.parse methode.
Stel dat je twee AJAX calls achter elkaar. Is het dan altijd zo dat de eerste call voor de tweede call is afgehandelt?
Neen. Indien je dit echter wel wilt, dan moet je de AJAX calls chainen. Dit can je dan doen door de twee AJAX calls te verzenden in de callback functie van de eerste.
- Wat is callback hell?
- Wat is het nadeel van callback hell?
- ES6 heeft een oplossing geïmplementeerd om aan de callback hell te ontsnappen. Wat is de naam van deze oplossing?
- Callback hell is de naam dat gegeven wordt aan een reeks van geneste callback functies die nodig zijn om een asynchrone taak uit te voeren.
- Het nadeeel van callback hell is dat het de code moeilijk leesbaar en begrijpbaar maakt.
- Promises
De moderne manier om AJAX verzoeken te versturen is door gebruik te maken van de fetch API.
- Hoe stuur je een GET request?
- Wat voor waarde geeft de fetch API terug?
- const request = fetch(‘https://restcountries.com/rest/v2/name/belgium’);
- Een promise
- Wat is een promise?
- Welke toestanden kan een promise aannemen?
- Een promise is een object dat dient als placeholder voor het opslaan van een toekomstige waarde. Deze toekomstige waarde is dan het resultaat van een asynchrone operatie.
- Wanneer de toekomstige waarde nog niet bekend is, en dus de asynchrone taak nog in uitvoering is dan bevindt de promise zich in de ‘pending’ toestand.
Wanneer de asynchrone taak is uitgevoerd dan zeggen we dat de promise ‘settled’ is. In dit geval kan een promise zich in één van de volgende toestanden bevinden:
- fulfilled: Toestand dat aangeeft dat de asynchrone taak met succes werd uitgevoerd en daarom ook de gewenste waarde is verkregen.
- rejected: Toestand dat aangeeft dat er iets is fout gelopen bij uitvoer van de asynchrone taak en daarom een ongewenste waarde is verkregen.
- Wat kan je zeggen over de then methode die gebruikt kan worden op promises?
- Wat is de return waarde van een then methode?
- Wat kan je zeggen over de returnwaarden van de callback functies die meegegeven worden aan de then methoden?
- Worden de callback functies die als parameter van de then methoden worden meegegeven, in dezelfde volgorde uitgevoerd als de volgorde waarin de then methoden aan elkaar zijn geketend?
- De then methode is een methode dat toepaspbaar is op promises en die gebruikt word om ‘fulfilled’ of ‘rejected’ promises af te handelen.
promise.then(onFulfilled, onRejected);
De then methode neemt twee callback functies als parameters:
- De callback zal worden uitgevoerd in het geval dat de promise ‘fulfilled’ is.
- De tweede promise zal worden uitgevoerd in het geval dat de promlse ‘rejected’ is.
- Een nieuwe promise. Dit wilt ook meteen zeggen dat het mogelijk is om verschillende then methoden aan elkaar te ketenen.
- De waarde dat de callback functies teruggeven, zal gebruikt worden als de PromiseResult waarde van de promise dat wordt teruggegeven door then.
- Neen. Indien dit echter wel nodig is, dan is moet je een promise teruggeven uit te callback functie.
Hoe kan je AJAX Calls in een bepaalde volgorde uitvoeren gebruikmakend van de then methode?
Door de AJAX call te doen in de body van één van de callback functies die aan then wordt meegegeven. Het resultaat van die AJAX call is dan een promise. Deze promise hoor je dan terug te geven als waarde van de callback. bijvoorbeeld:
request
.then(function (response) {
// afhandeling van eerste fetch call
return response.json();
})
.then(function (data) {
console.log(data);
// tweede fetch call
return fetch(‘https://anime-facts-rest-api.herokuapp.com/api/v1’);
})
.then(function (response) {
// afhandeling van tweede fetch call
});
Gegeven:
promise
.then((response) => response.json())
.then((data) => getCountryData(‘portugal’))
.then((response) => console.log(‘success’))
.catch((error) => alert(error));
Waarvoor dient de catch methode?
De catch methode zal elke fout opvangen dat zich voordoet op elke plaats in de promise chain (de reeks van geketende then methoden). Wanneer een ‘then’ methode resulteert in een ‘rejected promise, zullen alle then methoden erna genegeerd worden en zal meteen de catch methode worden uitgevoerd. Deze methode neemt een callback functie als parameter dat zal uitgevoerd worden wanneer zich een fout voordoet en daarom de promise zich in de ‘rejected’ toestand bevindt.
De catch methode geeft ook een promise terug.
Waarvoor dient de finally mehtode?
Deze methode neemt een callback functie die sowieso zal uitgevoerd worden, wat de toestand van de promise ook is.
In welk geval zal een promise zich in ‘rejected’ toestand bevinden bij uitvoer van een ajax call?
Wanneer de internetverbinding vrebroken wordt terwijl de AJAX call wordt uitgevoerd.
Stel dat je data van een server wilt fetchen. De server API die jouw verzoek afhandelt merkt dat de verzochte data niet bestaat.
- Krijg je in dit geval een ‘fulfilled’ of ‘rejected’ promise terug?
- Je krijgt sowieso een ‘fulfilled’ promise terug. Wel zal de API de status van de response initialiseren met 404 en zal het de ok eigenschap initialiseren met false.
Deze twee eigenschappen kunnen gebruikt worden om na te gaan of de verzochte data wel bestaat of niet. Is dit niet het geval dan moeten we zelf een error aanmaken en ‘throwen’. Dit kan dan als volgt:
promise
.then((response) => {
if (!response.ok) {
throw new Error(requested data not found ${response.status});
}
return response.json();
})
.then((data) => { … })
.then((response) => { … })
.catch((error) => alert(error.message));
