Interaktionen mellem frontend og backend på websteder er muliggjort via HTTP-anmodninger. Funktioner som f.eks. at opdatere en ny/gammel bruger i en database, udgive et blogindlæg fra dit WordPress-dashboard, slette et billede fra din profil og opdatere din bio kræver alle en interaktion mellem en server og en klient for at ændre data.

Når vi bygger webapplikationer – både frontend- og full stack-webapplikationer – interagerer vi ofte med data, der er gemt på forskellige databaser og servere. Disse servere kan tilhøre tredjeparter eller være oprettet af udviklerne af et projekt.

For at interagere med disse servere kan vi gøre brug af forskellige HTTP-metoder til at anmode om data. Vi kan oprette, læse, opdatere og slette (eller CRUD) data på servere ved hjælp af dedikerede HTTP-verber som POST, GET, PUT/PATCH og DELETE.

I denne vejledning lærer du de forskellige måder, hvorpå du kan lave HTTP-forespørgsler til fjernservere og udføre CRUD-operationer i JavaScript.

Hvert afsnit vil introducere en ny metode til at sende HTTP-forespørgsler. Vi starter med de indbyggede metoder som f.eks. fetch API’et og XMLHttpRequest-objektet, før vi ser på nogle open source HTTP-anmodningsbiblioteker som Axios og SuperAgent.

Lad os komme i gang!

Hvad er en JavaScript HTTP-anmodning?

HTTP-anmodninger i JavaScript er et sæt foruddefinerede metoder, der bruges til at interagere med data, der er gemt på servere.

Hver anmodning, der sendes til en server, indeholder et slutpunkt og den type anmodning, der sendes. Du kan se et endpoint som en gateway mellem to programmerː klienten og serveren.

Klienten er det program, der sender en anmodning, mens serveren er det program, der modtager anmodningen. Serveren sender et svar tilbage, afhængigt af om anmodningen er gyldig. Hvis anmodningen er vellykket, sender serveren data tilbage i enten XML- eller JSON-format (JSON i de fleste tilfælde), og hvis anmodningen mislykkes, sender serveren en fejlmeddelelse tilbage.

De svar, som serveren sender tilbage, er normalt forbundet med statuskoder. Disse koder hjælper os med at forstå, hvad serveren forsøger at sige, når den modtager en anmodning. Her er nogle af dem, og hvad de betyder:

  • 100-199 angiver et oplysningssvar.
  • 200-299 angiver en vellykket anmodning.
  • 300-399 angiver omdirigering.
  • 400-499 angiver en klientfejl.
  • 500-599 angiver en serverfejl.

Vi vil tale mere om nogle af dem i de følgende afsnit.

I det næste afsnit ser du de forskellige måder, du kan lave HTTP-anmodninger på i JavaScript.

Sådan laver du en HTTP-anmodning i JavaScript

Dette afsnit vil være opdelt i underafsnit, hvor du i hvert afsnit lærer dig forskellige metoder, du kan bruge til at lave HTTP-anmodninger i JavaScript.

Hver af de behandlede metoder vil have et eksempel, der viser, hvordan du sender POST-, GET-, PUT/PATCH- og DELETE-anmodninger til servere.

JSON Placeholder vil fungere som fjernserver/endpoint, hvor alle vores anmodninger vil blive sendt hen.

Lad os dykke ned i det!

1. Sådan laver du en HTTP-anmodning i JavaScript ved hjælp af XMLHttpRequest (AJAX)

XMLHttpRequest er et indbygget JavaScript-objekt, der bruges til at interagere med servere og indlæse indhold på websider uden at genindlæse browseren.

I dette afsnit kan du se, hvordan du sender POST-, GET-, PUT/PATCH- og DELETE-anmodninger ved hjælp af XMLHttpRequest.

AJAX bruges til at foretage asynkrone HTTP-anmodninger. Det betyder ganske enkelt, at mens et svar fra en anmodning er ventende, kan andre dele af din JavaScript-kode fortsætte med at køre uden at vente på, at anmodningen først er færdig.

Du kan også skubbe ændringer til et bestemt afsnit af din webside uden at tvinge den besøgende til at genindlæse hele siden ved hjælp af AJAX.

AJAX arbejder som standard med XMLHttpRequest-objektet, så eksemplerne i dette afsnit kan betragtes som AJAX-anmodninger.

Sådan sender du en GET Request i JavaScript ved hjælp af XMLHttpRequest

Du gør brug af GET-anmodningen, når du ønsker at hente data fra en server. Hvis du vil sende en vellykket GET-anmodning ved hjælp af XMLHttpRequest i JavaScript, skal du sikre dig, at følgende er gjort korrekt:

  1. Opret et nyt XMLHttpRequest-objekt.
  2. Åbn en forbindelse ved at angive anmodningstype og slutpunkt (serverens URL).
  3. Send anmodningen.
  4. Lyt efter serverens svar.

Nu hvor vi har set nogle af de trin, der er involveret i at sende en POST-anmodning ved hjælp af XMLHttpRequest, kan vi se et kodeeksempelː

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}`);
  }
};

Vi vil bryde koden ovenfor ned for at hjælpe dig med at forstå, hvad der sker her.

Den første ting vi gjorde var at oprette et nyt XMLHttpRequest-objekt og gemme det i en variabel kaldet xhr. Det vil sige:

const xhr = new XMLHttpRequest();

Vi angav derefter anmodningstypen (GET) og det slutpunkt, hvor anmodningen skal sendes til (i dette tilfælde “https://jsonplaceholder.typicode.com/users“)ː

xhr.open("GET", "https://jsonplaceholder.typicode.com/users");

For at sende anmodningen til serveren brugte vi metoden send().

Når serveren sender data tilbage, kan du angive det format, som dataene returneres i.

I de fleste tilfælde anvendes JSON. Så vi sørgede for at vores data blev returneret i JSON ved at tilføje dette:

xhr.responseType = "json";

På dette tidspunkt har vi med succes sendt en GET-forespørgsel. Det næste vi skal gøre er at lytte til, hvad serveren siger, ved hjælp af en event listener:

xhr.onload = () => {
  if (xhr.readyState == 4 && xhr.status == 200) {
    const data = xhr.response;
    console.log(data);
  } else {
    console.log(`Error: ${xhr.status}`);
  }
};

I koden ovenfor gør vi brug af onload event listener. Ved hjælp af en if-anvisning kontrollerede vi status for serverens svar.

Hvis klientens status er 4 (DONE), og hvis statuskoden er 200 (succesfuld), logges dataene til konsollen. I modsat fald vises en fejlmeddelelse med fejlstatus.

Hvis du har fulgt med indtil dette punkt uden fejl, bør du have et array af objekter i din konsolː

[{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]

Dette er de data, der er hentet fra serveren.

Sådan Send en POST Request i JavaScript Brug XMLHttpRequest

Med POST-anmodningen kan du sende nye oplysninger (data) til serveren/databasen som et objekt. Objektet kan være oplysninger om en ny bruger, en ny post på en to-do-liste, eller hvad du ellers har brug for at logge.

Det kodeeksempel, du vil se i dette afsnit, ligner det i sidste afsnit. Den væsentligste forskel er, at POST-anmodninger kræver nogle oplysninger, som normalt gemmes i et objekt, før de sendes til serveren.

Her er et eksempel:

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);

I koden ovenfor gemmes de oplysninger, der skal sendes til serveren, i en variabel kaldet body. Den indeholder tre egenskaberː title, body, og userId.

Bemærk, at variablen body, som indeholder objektet, skal konverteres til et JSON-objekt, før det sendes til serveren. Konverteringen foretages ved hjælp af metoden JSON.stringify().

For at sikre, at JSON-objektet sendes til serveren, overføres det som en parameter til metoden send():

xhr.send(body);

Sådan sendes en PATCH Request i JavaScript ved hjælp af XMLHttpRequest

PATCH-anmodningen bruges til at opdatere angivne egenskaber for et objekt. Dette er forskelligt fra PUT-metoden, som opdaterer hele objektet.

Her er et eksempel på en PATCH-anmodning ved hjælp af XMLHttpRequest i 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);

Ovenstående kode vil, hvis den lykkes, logge den del af objektet, der blev opdateret og sendt til serveren.

Sådan sendes en DELETE Request i JavaScript ved hjælp af XMLHttpRequest

Ligesom navnet antyder, bruges DELETE-metoden til at slette data fra en server. Dette er det samme for alle JavaScript HTTP-metoder.

I de fleste tilfælde skal du angive ID’et for de data, du vil slette. ID’et er normalt en parameter i endpointet/URL’en.

Lad os se et eksempel på en DELETE-anmodningː

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();

Koden ovenfor sletter et objekt med et indlæg med ID 3 som angivet i endpointet (“https://jsonplaceholder.typicode.com/posts/3“).

2. Hvordan man laver en HTTP Request i JavaScript Brug jQuery

jQuery forenkler processen med at hente data fra servere ved at gøre syntaksen kortere og mere ligetil.

I dette afsnit vil du se, hvordan du laver HTTP-forespørgsler ved hjælp af forskellige jQuery-metoder.

Sådan sendes en GET Request i JavaScript ved hjælp af jQuery

jQuery giver os metoden $.get() til at sende GET-forespørgsler til servere. Metoden tager to parametre ind – URL’en til serveren og en callback-funktion, som kører, hvis anmodningen lykkes.

Her er et eksempel:

$.get("https://jsonplaceholder.typicode.com/users", (data, status) => {
  console.log(data);
});

Som det fremgår af koden ovenfor, har $.get()-metoden modtaget URL’en (https://jsonplaceholder.typicode.com/users) og en anonym callback-funktion som parametre.

Via callback-funktionen kan du få adgang til dataene fra anmodningen og status for anmodningen. I vores eget tilfælde loggede vi dataene til konsollen.

Så enkelt er det at sende en GET-anmodninger ved hjælp af jQuery.

Sådan sender du en POST Request i JavaScript ved hjælp af jQuery

For at sende en POST-anmodning ved hjælp af jQuery bruger vi metoden $.post(). Den tager tre parametre – URL’en, de data, der skal sendes til serveren, og en callback-funktion.

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);
});

I koden ovenfor har vi oprettet et objekt, der skal sendes til serveren, og gemt det i en variabel kaldet body. Denne variabel blev overført som anden parameter i metoden $.post().

Ved hjælp af callback-funktionen loggede vi resultatet af anmodningen til konsollen.

3. Hvordan man laver asynkrone anmodninger i jQuery Brug $.ajax() metode

Før vi går videre til at sende PATCH- og DELETE-forespørgsler, skal vi tale om metoden $.ajax().

Metoden $.ajax() i jQuery bruges til at foretage asynkrone anmodninger.

Syntaksen er anderledes end de andre.

Her er hvordan du laver en GET-anmodninger ved hjælp af metoden $.ajax():

$.ajax({
  url: "https://jsonplaceholder.typicode.com/users",
  type: "GET",
  success: function (result) {
    console.log(result);
  },
});

Metoden $.ajax() har forskellige parametre, som vi kan bruge.

I koden ovenfor angiver url-parameteren URL’en til serveren, type angiver anmodningstypen, og success-parameteren kalder en callback-funktion, hvis anmodningen er vellykket.

I næste afsnit vil du se, hvordan du kan sende PATCH- og DELETE-anmodninger ved hjælp af jQuerys $.ajax()-metode.

Sådan sendes en PATCH-anmodning i JavaScript ved hjælp af jQuerys $.ajax()-metode

I dette afsnit kan du se, hvordan du sender PATCH-forespørgsler ved hjælp af jQuerys $.ajax()-metode.

Her er koden:

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);
  },
});

I ovenstående kode er den egenskab, der skal opdateres, gemt i variablen body. Denne bruges derefter som værdi for parameteren data.

Hvis anmodningen er vellykket, udføres funktionen for parameteren success.

Sådan sendes en DELETE Request i JavaScript ved hjælp af jQuery’s $.ajax() Metode

Afsendelse af en DELETE-anmodning ved hjælp af jQuerys $.ajax()-metode kræver kun nogle få linjer kode.

Her er et eksempel:

$.ajax({
  url: "https://jsonplaceholder.typicode.com/posts/3",
  type: "DELETE",
  success: function (result) {
    console.log(result)
  },
});

Som det fremgår ovenfor, var det eneste, vi skulle gøre, at angive URL’en med ID’et for det objekt, der skal slettes, typen af anmodning og en funktion, der kører, hvis anmodningen lykkes.

Sådan bruges $.getJSON-metoden i jQuery

Metoden $.getJSON giver en kortere måde at sende GET-anmodning på.

For at foretage en vellykket anmodning skal du blot angive URL’en og callback-funktionen. Her er et eksempel:

$.getJSON("https://jsonplaceholder.typicode.com/users", function (result) {
  console.log(result)
});

I koden ovenfor har vi som parametre til metoden $.getJSON angivet URL’en til serveren og den funktion, der kører, når anmodningen lykkes, som parametre til metoden .

Koden ovenfor logger et array af objekter med brugeroplysninger til konsollen.

4. Sådan laver du en HTTP-anmodning i JavaScript ved hjælp af Fetch API’et

fetch API’et er en af de mest populære måder at interagere med servere på ved hjælp af JavaScript. Det er en indfødt JavaScript API, som har understøttelse af løfter, mens der foretages anmodninger.

Syntaksen for brug af fetch API’et er meget let at forstå, som du vil se i de følgende afsnit.

Sådan sender du en GET-anmodning i JavaScript ved hjælp af Fetch API’et

Afsendelse af en GET-anmodning ved hjælp af fetch API’et kræver kun URL’en. Dette returnerer derefter et løfte, som du kan få adgang til ved hjælp af metoden then() eller nøgleordene async og await.

Lad os se på et eksempel:

fetch("https://jsonplaceholder.typicode.com/posts")
.then((response) => response.json())
.then((json) => console.log(json));

I koden ovenfor har vi sendt URL’en til metoden fetch; denne returnerer et løfte. Derefter fik vi adgang til serverens svar ved hjælp af metoden then(). Svaret blev konverteret til et JSON-objekt ved hjælp af metoden response.json().

Efter at have modtaget svaret brugte vi derefter en anden then()-metode til at logge dataene ud til konsollen.

Sådan sender du en POST-forespørgsel i JavaScript ved hjælp af Fetch API’et

Fetch-metoden har en anden parameter, som giver os mulighed for at angive body (data, der skal sendes) og typen af den anmodning, der skal sendes. Med denne anden parameter kan vi sende POST- og PATCH-anmodninger.

Tag et kig på denne prøvekode:

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));

I koden ovenfor tilføjede vi anmodningsindstillinger i fetch-metodens anden parameter. method blev brugt til at angive anmodningstypen, body angav de data, der skulle sendes til serveren, og headers blev brugt til at angive, at vi ville sende JSON-data til serveren.

Som vi gjorde før, da vi sendte en GET-anmodning, fik vi adgang til det returnerede løfte/svar ved hjælp af then()-metoden.

Sådan sender du en PUT-anmodning i JavaScript ved hjælp af Fetch API’et

I andre afsnit, hvor vi sendte en anmodning om at opdatere et objekt i serveren, gjorde vi brug af PATCH. I dette afsnit bruger vi PUT, som giver dig mulighed for at opdatere et objekt i sin helhed.

Her er et eksempel med fetch API’et:

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));

Da vi sender en PUT-anmodning, skal vi angive de data, der skal opdateres, som bliver overført som en værdi til body-anmodningsindstillingen.

Vi har også angivet ID’et for det objekt, der skal opdateres, som den sidste parameter i URL’en. Hvis anmodningen kører med succes, bør du se det opdaterede objekt blive logget på konsollen.

Sådan sender du en DELETE-anmodning i JavaScript ved hjælp af Fetch API’et

Det er ret ligetil at sende en DELETE-anmodning – det eneste, du skal gøre, er at angive ID’et for det objekt, der skal slettes. Du kan bruge metoden then() til at modtage svaret fra serveren, ligesom vi gjorde med de andre anmodninger.

Her er et hurtigt eksempel:

fetch("https://jsonplaceholder.typicode.com/posts/3", {
  method: "DELETE",
});

Ovenstående kode sletter et objekt med ID 3.

5. Hvordan man laver en HTTP Request i JavaScript Brug Axios

Axios er et tredjepartsbibliotek baseret på løfter til at sende HTTP-anmodning. Ligesom de fleste moderne HTTP-klienter forenkler det processen med at sende anmodninger til en server.

I dette afsnit lærer du, hvordan du sender GET-, POST-, PUT- og DELETE-anmodninger til en server ved hjælp af Axios.

Bemærk, at Axios ikke er indbygget i JavaScript – du skal installere det separat for at kunne bruge dets funktionalitet. Hvis du vil installere Axios i dit projekt, skal du køre nedenstående kommando i din projektterminal:

npm install axios

Sådan sender du en GET-anmodning i JavaScript ved hjælp af Axios

For at sende en GET-anmodning ved hjælp af Axios skal du blot sende URL’en til metoden get(), som returnerer et løfte. Svaret, der returneres fra løftet, kan tilgås ved hjælp af metoden then().

Lad os se et eksempel:

axios.get("https://jsonplaceholder.typicode.com/posts")
.then((response) => console.log(response.data))
.catch((error) => console.log(error));

Ovenstående kode vil logge et array af objekter ud, der indeholder data, der returneres fra serveren. Du vil bemærke, at vi ikke behøvede at ændre de returnerede objekter til JSON-objekter – Axios håndterer dette under motorhjelmen, og du kan få adgang til dataene ved hjælp af response.data.

For at fange eventuelle fejl brugte vi metoden catch().

Sådan sender du en POST Request i JavaScript ved hjælp af Axios

POST-anmodningen i Axios tager to parametre – URL’en og de data, der skal sendes til serveren. Du kan gemme dataene i en variabel eller sende dem direkte som en parameter.

Her er hvordan:

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))

I eksemplet ovenfor sender vi data til serveren. Dataene sendes som en anden parameter til metoden post().

Hvis anmodningen sendes med succes, vil resultatet blive logget på konsollen.

Sådan sendes en PUT Request i JavaScript ved hjælp af Axios

At sende en PUT-anmodning med Axios svarer til at sende en POST-anmodning. Hvis du vil sende en PUT-anmodning, skal du angive URL-adressen (herunder ID’et for det objekt, der skal opdateres) og de data, der skal opdateres, som en anden parameter i metoden put().

I eksemplet nedenfor opdateres et objekt med ID 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))

Sådan sendes en DELETE-anmodning i JavaScript med Axios

Hvis du vil sende en DELETE-anmodning, skal du angive ID’et for det objekt, der skal slettes, i URL’en.

Som sædvanlig skal du angive URL’en sammen med ID’et for det objekt, der skal slettes.

Her er et eksempel:

axios.delete("https://jsonplaceholder.typicode.com/posts/10")
.then(function (response) {
  console.log(response);
})
.then((error) => console.log(error))

6. Sådan laver du en HTTP-anmodning i JavaScript ved hjælp af SuperAgent

SuperAgent er et af de ældste biblioteker, der er bygget til at lave HTTP-anmodninger i JavaScript. Ligesom Axios understøtter det promises og har forudindbyggede metoder til at sende forskellige HTTP-anmodninger til servere.

Hvis du vil bruge SuperAgent, skal du installere det ved hjælp af nedenstående kommando:

npm install superagent

Vi starter med et eksempel på en GET-anmodning.

Sådan sender du en GET-anmodning i JavaScript ved hjælp af SuperAgent

SuperAgent giver os en get()-metode til at sende GET-anmodninger. URL’en sendes ind som metodens parameter.

Det løfte, der returneres fra anmodningen, kan derefter vurderes ved hjælp af end()-metoden, som det ses i dette eksempel:

superagent
.get("https://jsonplaceholder.typicode.com/posts")
.end((error, response) => {
  console.log(response.body);
});

Sådan sender du en POST-anmodning i JavaScript ved hjælp af SuperAgent

Når du sender en POST-anmodning ved hjælp af SuperAgent, indsender du de data, der skal sendes til serveren, som en parameter til SuperAgents send()-metode:

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);
});

I koden ovenfor blev URL’en sendt ind som parameter for post()-metoden. De data, der skal sendes, blev indsendt til send()-metoden. Ved hjælp af metoden end() fik vi resultatet af serverens svar.

Sådan sender du en PUT Request i JavaScript ved hjælp af SuperAgent

Du kan sende en PUT-anmodning i SuperAgent ved hjælp af metoden put(). Ligesom i eksemplet i sidste afsnit vil de data, der skal opdateres, blive sendt som en parameter til send()-metoden.

Her er et eksempel:

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);
});

Sådan sender du en DELETE Request i JavaScript ved hjælp af SuperAgent

Hvis du vil sende en sletteanmodning, skal du blot angive ID’et for det objekt, der skal slettes, i URL’en. Dette vil blive brugt som en parameter i metoden delete().

superagent
.delete("https://jsonplaceholder.typicode.com/posts/10")
.end((err, res) => {
  console.log(res.body);
});

7. Sådan laver du en HTTP-anmodning i JavaScript ved hjælp af Qwest

Qwest er et AJAX-bibliotek til at interagere med servere. Det er i øjeblikket arkiveret på GitHub – ophavsmanden ophørte med at vedligeholde biblioteket, da fetch API og Axios blev udviklet.

Qwest understøtter også brugen af promises.

I de følgende underafsnit vil du se, hvordan du kan sende GET-, POST-, PUT- og DELETE-anmodninger ved hjælp af Qwest.

Sådan sendes en GET-anmodning i JavaScript ved hjælp af Qwest

Qwest har en get()-metode, der kan bruges til at sende GET-anmodninger. Her er hvordan du bruger den:

qwest.get("https://jsonplaceholder.typicode.com/posts")

.then((xhr, response) => console.log(response));

Sådan sender du en POST Request i JavaScript ved hjælp af Qwest

Som en anden parameter sendes de data, der skal sendes til en server, til post()-metoden. Den første parameter er URL’en.

Her er et eksempel:

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)
});

Sådan sender du en PUT Request i JavaScript ved hjælp af Qwest

Syntaksen her er den samme som den i det foregående afsnit. Det eneste, du skal ændre, er anmodningstypen og derefter angive ID’et for det objekt, der skal opdateres, sammen med de data, du ønsker at opdatere objektet med.

Tag et kig på dette eksempel:

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)
});

Bemærk, at ID’et angives i URL’en og ikke i det objekt, der sendes til serveren.

Sådan sender du en DELETE Request i JavaScript ved hjælp af Qwest

Hvis du vil slette et objekt fra en server, skal du som sædvanlig angive URL-adressen og ID’et for det objekt, der skal slettes. Både URL-adressen og ID’et for det objekt, der skal slettes, sendes som en parameter til metoden delete() i Qwest.

Her er et eksempel:

qwest.delete("https://jsonplaceholder.typicode.com/posts/30")
.then(function(xhr, response) {
  console.log(response)
})
.catch(function(e, xhr, response) {
  console.log(e)
});

Når anmodningen er gennemført med succes, slettes et objekt med ID 30.

Oversigt

Vores mulighed for at interagere med servere ved hjælp af JavaScript har udviklet sig gennem årene. Med et voksende og aktivt fællesskab af JavaScript-udviklere foretages der stadig konstante ændringer, og der indføres nye værktøjer for at gøre processen enklere og lettere.

De metoder, der er diskuteret i denne tutorial, gælder ikke kun for fjernservere – de kan også bruges til at interagere med dine egne servere, når du bygger full stack webapplikationer. De fungerer også med adskillige JavaScript-biblioteker og frameworks.

I denne vejledning har vi lært dig, hvordan du laver HTTP-anmodninger i JavaScript. Vi gav forskellige eksempler og forklaringer, der viste, hvordan man sender GET-, POST-, PUT/PATCH- og DELETE-forespørgsler ved hjælp af indbyggede JavaScript-metoder og tredjepartsbiblioteker.

At bygge og implementere et websted kan være en kedelig opgave uanset dine færdigheder. Men Kinsta gør det nemt og ubesværet med DevKinsta. DevKinsta bruges af over 25.000 udviklere, webdesignere og freelancere og tilbyder et lokalt miljø til udvikling af WordPress-temaer, plugins og meget mere. Tjek det ud!