De interactie tussen de frontend en backend van websites wordt mogelijk gemaakt door HTTP verzoeken. Functionaliteiten zoals het bijwerken van een nieuwe/oude gebruiker in een database, het publiceren van een blogbericht vanuit je WordPress dashboard, het verwijderen van een foto uit je profiel, en het bijwerken van je bio vereisen allemaal een interactie tussen een server en een client om gegevens te wijzigen.
Bij het bouwen van webapplicaties – zowel frontend als fullstack webapps – hebben we vaak te maken met interactie tussen gegevens die zijn opgeslagen binnen verschillende databases en servers. Deze servers kunnen eigendom zijn van externe partijen of gemaakt zijn door de developers van een project.
Voor interactie met deze servers kunnen we gebruik maken van verschillende HTTP methoden om gegevens op te vragen. We kunnen gegevens op servers creëren, lezen, bijwerken en verwijderen (of CRUD) met behulp van speciale HTTP werkwoorden als POST, GET, PUT/PATCH en DELETE.
In deze tutorial leer je de verschillende manieren waarop je HTTP verzoeken kunt doen aan externe servers en CRUD bewerkingen kunt uitvoeren in JavaScript.
Elk deel introduceert een nieuwe methode voor het versturen van HTTP verzoeken. We beginnen met de ingebouwde methoden zoals de fetch API en het XMLHttpRequest object voordat we kijken naar enkele open-source HTTP verzoeklibraries zoals Axios en SuperAgent.
Laten we beginnen!
Wat is een JavaScript HTTP verzoek?
HTTP verzoeken in JavaScript zijn een verzameling vooraf gedefinieerde methoden die worden gebruikt voor interactie met gegevens die zijn opgeslagen op servers.
Elk verzoek dat naar een server wordt gestuurd bevat een endpoint en het type verzoek dat wordt verzonden. Je kunt een endpoint zien als een poort tussen twee programma’sː de client en de server.
De client is het programma dat een verzoek stuurt, terwijl de server het verzoek ontvangt. De server stuurt een respons terug, afhankelijk van de geldigheid van het verzoek. Als het verzoek succesvol is, stuurt de server gegevens terug in XML of JSON format (JSON in de meeste gevallen), en als het verzoek mislukt, stuurt de server een foutmelding terug.
De antwoorden die de server terugstuurt zijn meestal geassocieerd met statuscodes. Deze codes helpen ons te begrijpen wat de server probeert te zeggen als hij een verzoek ontvangt. Hier zijn er enkele en wat ze betekenen:
- 100-199 betekent een informatieve respons.
- 200-299 staat voor een geslaagd verzoek.
- 300-399 staat voor redirect.
- 400-499 wijst op een fout van de client.
- 500-599 betekent serverfout.
Over sommige daarvan praten we meer in de volgende secties.
In de volgende sectie zie je de verschillende manieren waarop je HTTP verzoeken kunt doen in JavaScript.
Zo doe je een HTTP verzoek in JavaScript
Deze sectie zal worden verdeeld in subsecties, waarbij elke sectie je verschillende methoden leert die je kunt gebruiken om HTTP verzoeken te doen in JavaScript.
Elke besproken methode heeft een voorbeeld dat laat zien hoe je POST, GET, PUT/PATCH en DELETE verzoeken naar servers stuurt.
JSON Placeholder zal dienen als de externe server/endpoint waar al onze verzoeken naartoe worden gestuurd.
Laten we beginnen!
1. Zo maak je een HTTP verzoek in JavaScript met XMLHttpRequest (AJAX)
XMLHttpRequest is een ingebouwd JavaScript object dat wordt gebruikt voor interactie met servers en het laden van content in webpagina’s zonder de browser te herladen.
In dit gedeelte zul je zien hoe je POST, GET, PUT/PATCH en DELETE verzoeken kunt versturen met behulp van XMLHttpRequest.
AJAX wordt gebruikt om asynchrone HTTP verzoeken te doen. Dit betekent eenvoudigweg dat terwijl een respons op een verzoek in afwachting is, andere delen van je JavaScript code verder kunnen draaien zonder eerst te wachten tot het verzoek voltooid is.
Je kunt met AJAX ook wijzigingen doorvoeren in een bepaald deel van je webpagina zonder de bezoeker te dwingen de hele pagina opnieuw te laden.
AJAX werkt standaard met het XMLHttpRequest object, dus de voorbeelden in deze sectie kunnen worden beschouwd als AJAX verzoeken.
Zo verzend je een GET in JavaScript met behulp van XMLHttpRequest
Je maakt gebruik van het GET verzoek wanneer je gegevens van een server wilt ophalen. Om een succesvol GET verzoek te versturen met behulp van XMLHttpRequest in JavaScript, moet je ervoor zorgen dat het volgende correct gebeurt:
- Maak een nieuw XMLHttpRequest object.
- Open een verbinding door het verzoektype en het eindpunt (de URL van de server) op te geven.
- Verstuur het verzoek.
- Luister naar het antwoord van de server.
Nu we enkele van de stappen hebben gezien die betrokken zijn bij het verzenden van een POST verzoek met behulp van XMLHttpRequest, laten we een codevoorbeeld bekijkenː
const xhr = new XMLHttpRequest();
xhr.open("GET", "https://jsonplaceholder.typicode.com/users");
xhr.send();
xhr.responseType = "json";
xhr.onload = () => {
if (xhr.readyState == 4 && xhr.status == 200) {
const data = xhr.response;
console.log(data);
} else {
console.log(`Error: ${xhr.status}`);
}
};We zullen de bovenstaande code opsplitsen om je te helpen begrijpen wat hier gebeurt.
Het eerste wat we deden was een nieuw XMLHttpRequest object maken en het opslaan in een variabele genaamd xhr. Dat is:
const xhr = new XMLHttpRequest();Vervolgens hebben we het verzoektype (GET) en het endpoint waar het verzoek naartoe wordt gestuurd (in dit geval “https://jsonplaceholder.typicode.com/users”) gespecificeerdː
xhr.open("GET", "https://jsonplaceholder.typicode.com/users");Om het verzoek naar de server te sturen, gebruikten we de methode send().
Wanneer de server gegevens terugstuurt, kun je aangeven in welk format de gegevens worden teruggestuurd.
In de meeste gevallen wordt JSON gebruikt. Dus zorgden we ervoor dat onze gegevens in JSON werden teruggestuurd door dit toe te voegen:
xhr.responseType = "json";Op dit punt hebben we met succes een GET verzoek verzonden. Het volgende dat we moeten doen is luisteren naar wat de server zegt door een eventlistener te gebruiken:
xhr.onload = () => {
if (xhr.readyState == 4 && xhr.status == 200) {
const data = xhr.response;
console.log(data);
} else {
console.log(`Error: ${xhr.status}`);
}
};In bovenstaande code maken we gebruik van de onload eventlistener. Met behulp van een if statement controleren we de status van het antwoord van de server.
Als de status van de client 4 (DONE) is en als de statuscode 200 (succesvol) is, worden de gegevens gelogd op de console. Anders verschijnt er een foutmelding met de foutstatus.
Als je tot dit punt zonder fouten hebt gevolgd, zou je een array van objecten in je console moeten hebbenː
[{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]Dit zijn de gegevens die van de server zijn opgehaald.
Zo verzend je een POST verzoek in JavaScript met behulp van XMLHttpRequest
Met het POST verzoek kun je nieuwe informatie (gegevens) naar de server/database sturen als een object. Het object kan informatie zijn over een nieuwe gebruiker, een nieuw to-do lijstitem, of wat dan ook dat je moet loggen.
Het codevoorbeeld dat je in dit deel zult zien lijkt op dat in het vorige deel. Het belangrijkste verschil is dat POST verzoeken enige informatie vereisen, die meestal wordt opgeslagen in een object voordat het naar de server wordt gestuurd.
Hier is een voorbeeld:
const xhr = new XMLHttpRequest(); xhr.open("POST", "https://jsonplaceholder.typicode.com/posts"); xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); const body = JSON.stringify({ title: "Hello World", body: "My POST request", userId: 900, }); xhr.onload = () => { if (xhr.readyState == 4 && xhr.status == 201) { console.log(JSON.parse(xhr.responseText)); } else { console.log(`Error: ${xhr.status}`); } }; xhr.send(body);
In bovenstaande code wordt de naar de server te sturen informatie opgeslagen in een variabele genaamd body. Deze bevat drie eigenschappenː title, body, en userId.
Merk op dat de variabele body die het object bevat moet worden geconverteerd naar een JSON object voordat het naar de server wordt gestuurd. De conversie wordt gedaan met de methode JSON.stringify().
Om er zeker van te zijn dat het JSON object naar de server wordt gestuurd, wordt het als parameter doorgegeven aan de methode send():
xhr.send(body);Zo verzend je een PATCH verzoek in JavaScript met behulp van XMLHttpRequest
Het PATCH verzoek wordt gebruikt om gespecificeerde eigenschappen van een object bij te werken. Dit is anders dan de PUT methode, die het hele object bijwerkt.
Hier volgt een voorbeeld van een PATCH verzoek met behulp van XMLHttpRequest in JavaScript:
const xhr = new XMLHttpRequest();
xhr.open("PATCH", "https://jsonplaceholder.typicode.com/posts/101");
xhr.setRequestHeader("Content-type", "application/json; charset=utf-8");
const body = JSON.stringify({
body: "My PATCH request",
});
xhr.onload = () => {
var data = JSON.parse(xhr.responseText);
if (xhr.readyState == 4 && xhr.status == "200") {
console.log(data);
} else {
console.log(`Error: ${xhr.status}`);
}
};
xhr.send(body);De bovenstaande code zal, indien succesvol, het deel van het object dat is bijgewerkt en naar de server is gestuurd loggen.
Zo verzend je een DELETE verzoek in JavaScript met behulp van XMLHttpRequest
Zoals de naam al aangeeft, wordt de DELETE methode gebruikt om gegevens van een server te verwijderen. Dit geldt voor elke JavaScript HTTP methode.
In de meeste gevallen moet je de ID opgeven van de gegevens die je wilt verwijderen. De ID is meestal een parameter in het endpoint/URL.
Laten we een voorbeeld zien van een DELETE verzoekː
const xhr = new XMLHttpRequest();
xhr.open("DELETE", "https://jsonplaceholder.typicode.com/posts/3");
xhr.onload = function () {
var data = JSON.parse(xhr.responseText);
if (xhr.readyState == 4 && xhr.status == "200") {
console.log(data);
} else {
console.log(`Error: ${xhr.status}`);
}
};
xhr.send();De bovenstaande code zal een object verwijderen met een post met een ID van 3 zoals opgegeven in het eindpunt (“https://jsonplaceholder.typicode.com/posts/3“).
2. Zo doe je een HTTP verzoek in JavaScript met behulp van jQuery
jQuery vereenvoudigt het ophalen van gegevens van servers door de syntax korter en eenvoudiger te maken.
In dit gedeelte zul je zien hoe je HTTP verzoeken doet met verschillende jQuery methoden.
Zo verzend je een GET verzoek in JavaScript met behulp van jQuery
jQuery biedt ons de methode $.get() voor het versturen van GET verzoeken naar servers. De methode neemt twee parameters mee – de URL naar de server en een callbackfunctie die wordt uitgevoerd als het verzoek succesvol is.
Hier volgt een voorbeeld:
$.get("https://jsonplaceholder.typicode.com/users", (data, status) => {
console.log(data);
});Zoals in bovenstaande code te zien is, neemt de methode $.get() de URL (https://jsonplaceholder.typicode.com/users) en een anonieme callbackfunctie als parameters in.
Via de callbackfunctie heb je toegang tot de gegevens van het verzoek en de status van het verzoek. In ons eigen geval logden we de gegevens naar de console.
Zo eenvoudig is het om een GET verzoek te versturen met jQuery.
Zo verzend je een POST verzoek in JavaScript met jQuery
Om een POST verzoek te versturen met jQuery gebruiken we de methode $.post(). Deze neemt drie parameters – de URL, de gegevens die naar de server moeten worden gestuurd, en een callbackfunctie.
const body = JSON.stringify({
title: "Hello World",
body: "My POST request",
userId: 900,
});
$.post("https://jsonplaceholder.typicode.com/users", body, (data, status) => {
console.log(data);
});In de bovenstaande code hebben we een object gemaakt dat naar de server moet worden gestuurd en opgeslagen in een variabele genaamd body. Deze variabele werd doorgegeven als tweede parameter in de methode $.post().
Met behulp van de callbackfunctie logden we het resultaat van het verzoek naar de console.
3. Zo doe je asynchrone verzoeken in jQuery met behulp van de $.ajax() methode
Voordat we overgaan tot het versturen van PATCH en DELETE verzoeken, laten we het hebben over de methode $.ajax().
De methode $.ajax() in jQuery wordt gebruikt om asynchrone verzoeken te doen.
De syntaxis is anders dan de andere.
Hier zie je hoe je een GET verzoek doet met de methode $.ajax():
$.ajax({
url: "https://jsonplaceholder.typicode.com/users",
type: "GET",
success: function (result) {
console.log(result);
},
});De methode $.ajax() heeft verschillende parameters die we kunnen gebruiken.
In bovenstaande code specificeert de url parameter de URL naar de server, de type specificeert het verzoektype, en de success parameter callt een callbackfunctie als het verzoek succesvol is.
In de volgende paragraaf zul je zien hoe je PATCH en DELETE verzoeken kunt versturen met behulp van jQuery’s $.ajax() methode.
Zo verzend je een PATCH verzoek in JavaScript met de $.ajax() methode van jQuery
In dit deel zie je hoe je PATCH verzoeken verstuurt met behulp van jQuery’s $.ajax() methode.
Hier is de code:
const body = JSON.stringify({
body: "My PATCH request",
});
$.ajax({
url: "https://jsonplaceholder.typicode.com/posts/101",
type: "PATCH",
data: body,
success: function (result) {
console.log(result);
},
});In bovenstaande code wordt de bij te werken eigenschap opgeslagen in de variabele body. Deze wordt dan gebruikt als waarde voor de parameter data.
Als het verzoek succesvol is, wordt de functie voor de success parameter uitgevoerd.
Zo verzend je een DELETE verzoek in JavaScript met de $.ajax() methode van jQuery
Het verzenden van een DELETE verzoek met behulp van jQuery’s methode $.ajax() vereist slechts een paar regels code.
Hier is een voorbeeld:
$.ajax({
url: "https://jsonplaceholder.typicode.com/posts/3",
type: "DELETE",
success: function (result) {
console.log(result)
},
});Zoals hierboven te zien is, hoefden we alleen maar de URL met de ID van het te verwijderen object op te geven, het type verzoek, en een functie die wordt uitgevoerd als het verzoek succesvol is.
Zo gebruik je de de $.getJSON methode in jQuery
De methode $.getJSON biedt een kortere manier om GET verzoeken te versturen.
Voor een succesvol verzoek hoef je alleen de URL en de callbackfunctie op te geven. Hier is een voorbeeld:
$.getJSON("https://jsonplaceholder.typicode.com/users", function (result) {
console.log(result)
});In de bovenstaande code hebben we de URL naar de server en de functie die wordt uitgevoerd nadat het verzoek slaagt als parameters doorgegeven aan de methode $.getJSON.
De bovenstaande code logt een array van objecten met gebruikersinformatie naar de console.
4. Zo doe je een HTTP verzoek in JavaScript met de Fetch API
De fetch API is een van de populairste manieren van interactie met servers met behulp van JavaScript. Het is een ingebouwde JavaScript API die ondersteuning biedt voor promises bij het doen van verzoeken.
De syntaxis voor het gebruik van de fetch API is heel eenvoudig te begrijpen, zoals je zult zien in de volgende secties.
Zo verzend je een GET verzoek in JavaScript met behulp van de Fetch API
Voor het versturen van een GET verzoek met de fetch API is alleen de URL nodig. Deze retourneert dan een promise die je kunt benaderen met de methode then() of de trefwoorden async en await.
Laten we een voorbeeld bekijken:
fetch("https://jsonplaceholder.typicode.com/posts")
.then((response) => response.json())
.then((json) => console.log(json));In bovenstaande code hebben we de URL doorgegeven aan de methode fetch; deze geeft een promise terug. Vervolgens benaderden we het antwoord van de server met de methode then(). Het antwoord werd omgezet in een JSON object met de methode response.json().
Na het verkrijgen van het antwoord gebruikten we nog een methode then() om de gegevens naar de console uit te loggen.
Zo verzend je een POST verzoek in JavaScript met behulp van de Fetch API
De fetch methode heeft een tweede parameter waarmee we de body (te verzenden gegevens) en het type verzoek kunnen specificeren. Met deze tweede parameter kunnen we POST en PATCH verzoeken versturen.
Kijk eens naar deze voorbeeldcode:
fetch("https://jsonplaceholder.typicode.com/posts", {
method: "POST",
body: JSON.stringify({
title: "Hello World",
body: "My POST request",
userId: 900,
}),
headers: {
"Content-type": "application/json; charset=UTF-8",
},
})
.then((response) => response.json())
.then((json) => console.log(json));In de bovenstaande code hebben we verzoekopties toegevoegd in de tweede parameter van de methode fetch. method werd gebruikt om het verzoektype te specificeren, body specificeerde de gegevens die naar de server moeten worden gestuurd, en headers werd gebruikt om te specificeren dat we JSON gegevens naar de server zouden sturen.
Zoals we eerder deden bij een GET verzoek, werd de geretourneerde promise/respons benaderd met de methode then().
Zo verzend je een PUT verzoek in JavaScript met de Fetch API
In andere secties waar we een verzoek stuurden om een object in de server bij te werken, maakten we gebruik van PATCH. In deze sectie gebruiken we PUT, waarmee je een object in zijn geheel kunt bijwerken.
Hier is een voorbeeld met de fetch API:
fetch("https://jsonplaceholder.typicode.com/posts/1", {
method: "PUT",
body: JSON.stringify({
id: 1,
title: "My PUT request",
body: "Updating the entire object",
userId: 1,
}),
headers: {
"Content-type": "application/json; charset=UTF-8",
},
})
.then((response) => response.json())
.then((json) => console.log(json));Omdat we een PUT verzoek sturen, moeten we de bij te werken gegevens opgeven, die als waarde worden doorgegeven aan de body verzoekoptie.
We hebben ook het ID van het bij te werken object opgegeven als laatste parameter in de URL. Als het verzoek succesvol wordt uitgevoerd, zou je het bijgewerkte object in de console moeten zien.
Zo verzend je een DELETE verzoek in JavaScript met de Fetch API
Het versturen van een DELETE verzoek is vrij eenvoudig – alles wat je hoeft te doen is het ID van het te verwijderen object op te geven. Je kunt de methode then() gebruiken om het antwoord van de server te ontvangen, zoals we deden met de andere verzoeken.
Hier is een snel voorbeeld:
fetch("https://jsonplaceholder.typicode.com/posts/3", {
method: "DELETE",
});De bovenstaande code verwijdert een object met een ID van 3.
5. Zo doe je een HTTP verzoek in JavaScript met Axios
Axios is een externe op promises gebaseerde bibliotheek voor het versturen van HTTP verzoeken. Net als de meeste moderne HTTP clients vereenvoudigt het het proces van het versturen van verzoeken naar een server.
In dit gedeelte leer je hoe je GET, POST, PUT en DELETE verzoeken naar een server stuurt met Axios.
Merk op dat Axios niet is ingebouwd in JavaScript – je zult het apart moeten installeren om de functionaliteit ervan te gebruiken. Om Axios in je project te installeren, voer je onderstaand commando uit in je projectterminal:
npm install axiosZo verzend je een GET verzoek in JavaScript met Axios
Om een GET verzoek te versturen met Axios, hoef je alleen maar de URL door te geven aan de methode get(), die een promise teruggeeft. Het antwoord van de promise kan worden opgevraagd met de methode then().
Laten we een voorbeeld bekijken:
axios.get("https://jsonplaceholder.typicode.com/posts")
.then((response) => console.log(response.data))
.catch((error) => console.log(error));De bovenstaande code logt een array van objecten uit met gegevens die van de server zijn geretourneerd. Je zult merken dat we de geretourneerde objecten niet hoeven te veranderen in JSON objecten – Axios regelt dit onder de motorkap, en je kunt de gegevens benaderen met response.data.
Om eventuele fouten op te vangen, gebruikten we de methode catch().
Zo verzend je een POST verzoek in JavaScript met Axios
Het POST verzoek in Axios neemt twee parameters – de URL en de gegevens die naar de server moeten worden gestuurd. Je kunt de gegevens opslaan in een variabele of ze rechtstreeks als parameter doorgeven.
Hier zie je hoe:
axios.post("https://jsonplaceholder.typicode.com/posts", {
title: "POST request with Axios",
body: "POST request",
userId: 10,
})
.then(function (response) {
console.log(response.data);
})
.then((error) => console.log(error))In het bovenstaande voorbeeld sturen we gegevens naar de server. De gegevens worden doorgegeven als tweede parameter aan de methode post().
Als het verzoek succesvol is verzonden, zie je het resultaat gelogd in de console.
Zo verzend je een PUT verzoek in JavaScript met Axios
Het versturen van een PUT verzoek met Axios is vergelijkbaar met het versturen van een POST verzoek. Om een PUT verzoek te versturen, specificeer je de URL (inclusief de ID van het bij te werken object) en de bij te werken gegevens als tweede parameter in de put() methode.
Het onderstaande voorbeeld zal een object bijwerken met een ID van 10:
axios.put("https://jsonplaceholder.typicode.com/posts/10", {
title: "PUT request with Axios",
body: "PUT request",
userId: 10,
})
.then(function (response) {
console.log(response.data);
})
.then((error) => console.log(error))Zo verzend je een DELETE verzoek in JavaScript met Axios
Om een DELETE verzoek te sturen, specificeer je de ID van het te verwijderen object in de URL.
Zoals gewoonlijk moet je de URL opgeven samen met de ID van het object dat verwijderd moet worden.
Hier is een voorbeeld:
axios.delete("https://jsonplaceholder.typicode.com/posts/10")
.then(function (response) {
console.log(response);
})
.then((error) => console.log(error))6. Zo doe je een HTTP verzoek in JavaScript met SuperAgent
SuperAgent is een van de oudste bibliotheken voor het doen van HTTP verzoeken in JavaScript. Net als Axios ondersteunt het promises en heeft het voorgebouwde methoden om verschillende HTTP verzoeken naar servers te sturen.
Om SuperAgent te gebruiken, installeer je het met het onderstaande commando:
npm install superagentWe beginnen met een GET verzoek voorbeeld.
Zo verzend je een GET verzoek in JavaScript met SuperAgent
SuperAgent biedt ons een get() methode voor het versturen van GET verzoeken. De URL wordt doorgegeven als de parameter van de methode.
De promise die uit het verzoek terugkomt kan dan worden beoordeeld met de methode end(), zoals in dit voorbeeld:
superagent
.get("https://jsonplaceholder.typicode.com/posts")
.end((error, response) => {
console.log(response.body);
});Zo verzend je een POST verzoek in JavaScript met SuperAgent
Bij het versturen van een POST verzoek met SuperAgent geef je de gegevens die naar de server moeten worden gestuurd door als parameter aan de methode send() van SuperAgent:
superagent
.post("https://jsonplaceholder.typicode.com/posts")
.send({
title: "POST request with SuperAgent",
body: "POST request",
userId: 10,
})
.set("X-API-Key", "foobar")
.set("accept", "json")
.end((err, res) => {
console.log(res.body);
});In bovenstaande code werd de URL doorgegeven als parameter van de methode post(). De te verzenden gegevens werden doorgegeven aan de methode send(). Met behulp van de methode end() kregen we het resultaat van het antwoord van de server.
Zo verzend je een PUT verzoek in JavaScript met SuperAgent
Je kunt in SuperAgent een PUT verzoek versturen met de methode put(). Net als in het voorbeeld in de vorige sectie, worden de bij te werken gegevens doorgegeven als parameter aan de methode send().
Hier is een voorbeeld:
superagent
.put("https://jsonplaceholder.typicode.com/posts/10")
.send({
title: "PUT request with SuperAgent",
body: "PUT request",
userId: 10,
})
.set("X-API-Key", "foobar")
.set("accept", "json")
.end((err, res) => {
console.log(res.body);
});Zo verzend je een DELETE verzoek in JavaScript met behulp van SuperAgent
Om een delete verzoek te versturen, specificeer je eenvoudig het ID van het te verwijderen object in de URL. Dit wordt gebruikt als parameter in de methode delete().
superagent
.delete("https://jsonplaceholder.typicode.com/posts/10")
.end((err, res) => {
console.log(res.body);
});7. Zo doe je een HTTP verzoek in JavaScript met behulp van Qwest
Qwest is een AJAX library voor interactie met servers. Het is momenteel gearchiveerd op GitHub – de maker stopte met het onderhoud van de bibliotheek met de opkomst van de fetch API en Axios.
Qwest ondersteunt ook het gebruik van promises.
In de volgende subsecties zul je zien hoe je GET, POST, PUT en DELETE verzoeken verstuurt met Qwest.
Zo verzend je een GET verzoek in JavaScript met behulp van Qwest
Qwest heeft een methode get() die gebruikt kan worden om GET verzoeken te versturen. Dit is hoe je het gebruikt:
qwest.get("https://jsonplaceholder.typicode.com/posts")
.then((xhr, response) => console.log(response));Zo verzend je een POST verzoek in JavaScript met behulp van Qwest
Als tweede parameter worden de gegevens die naar een server moeten worden gestuurd doorgegeven aan de methode post(). De eerste parameter is de URL.
Hier is een voorbeeld:
qwest.post("https://jsonplaceholder.typicode.com/posts", {
title: 'POST request with Qwest',
body: 'POST request',
userId: 30
})
.then(function(xhr, response) {
console.log(response)
})
.catch(function(e, xhr, response) {
console.log(e)
});Zo verzend je een PUT verzoek in JavaScript met behulp van Qwest
De syntax is hier hetzelfde als in de vorige paragraaf. Het enige dat je hoeft te veranderen is het verzoektype en dan de ID van het bij te werken object opgeven samen met de gegevens waarmee je het object wilt bijwerken.
Kijk eens naar dit voorbeeld:
qwest.put("https://jsonplaceholder.typicode.com/posts/30", {
title: 'PUT request with Qwest',
body: 'PUT request',
userId: 30
})
.then(function(xhr, response) {
console.log(response)
})
.catch(function(e, xhr, response) {
console.log(e)
});Merk op dat de ID wordt opgegeven in de URL en niet in het object dat naar de server wordt gestuurd.
Zo verzend je een DELETE verzoek in JavaScript met behulp van Qwest
Om een object van een server te verwijderen, moet je zoals gewoonlijk de URL en de ID van het te verwijderen object opgeven. Zowel de URL als de ID van het te verwijderen object worden doorgegeven als parameter aan de methode delete() in Qwest.
Hier is een voorbeeld:
qwest.delete("https://jsonplaceholder.typicode.com/posts/30")
.then(function(xhr, response) {
console.log(response)
})
.catch(function(e, xhr, response) {
console.log(e)
});Zodra het verzoek succesvol wordt uitgevoerd, wordt een object met het ID van 30 verwijderd.
Samenvatting
Ons vermogen tot interactie met servers met behulp van JavaScript heeft zich in de loop der jaren ontwikkeld. Dankzij een groeiende en actieve community van JavaScript ontwikkelaars worden nog steeds voortdurend wijzigingen aangebracht en nieuwe tools geïntroduceerd om het proces eenvoudiger en gemakkelijker te maken.
De methoden die in deze tutorial worden besproken gelden niet alleen voor remote servers – ze kunnen ook worden gebruikt voor interactie met je eigen servers bij het bouwen van fullstack webapplicaties. Ze werken ook met talloze JavaScript libraries en frameworks.
In deze tutorial hebben we je geleerd hoe je HTTP verzoeken kunt doen in JavaScript. We gaven verschillende voorbeelden en uitleg die lieten zien hoe je GET, POST, PUT/PATCH en DELETE verzoeken kunt versturen met behulp van ingebouwde JavaScript methoden en externe libraries.
Het bouwen en implementeren van een website kan een vervelende taak zijn, ongeacht je vaardigheden. Maar Kinsta maakt dit gemakkelijk en moeiteloos met DevKinsta. DevKinsta wordt gebruikt door meer dan 25.000 developers, webdesigners en freelancers en biedt een lokale omgeving voor het ontwikkelen van WordPress thema’s, plugins en meer. Bekijk het zelf eens!
