Interaktionen mellan webbplatsers frontend och backend möjliggörs genom HTTP-förfrågningar. Du kanske vill uppdatera en ny/gammal användare i en databas, publicera ett blogginlägg från din WordPress-instrumentpanel, ta bort en bild från din profil och uppdatera din biografi. Alla dessa funktioner kräver en interaktion mellan en server och en klient för att ändra data.
När vi bygger webbapplikationer – både frontend- och fullstackwebbapplikationer – interagerar vi ofta med data som lagras i olika databaser och servrar. Dessa servrar kan tillhöra tredje part eller skapas av projektets utvecklare.
För att interagera med dessa servrar så kan vi använda oss av olika HTTP-metoder för att begära data. Vi kan skapa, läsa, uppdatera och radera (eller CRUD) data på servrar med hjälp av särskilda HTTP-verb. Detta handlar exempelvis om POST, GET, PUT/PATCH och DELETE.
I den här handledningen så får du lära dig de olika sätten att göra HTTP-förfrågningar till fjärrservrar. Du får även veta hur man utför CRUD-operationer i JavaScript.
Varje avsnitt kommer att presentera en ny metod för att skicka HTTP-begäranden. Vi börjar med de inbyggda metoderna som fetch API och XMLHttpRequest-objektet. Efter detta så tittar vi på några HTTP-förfrågningsbibliotek med öppen källkod som Axios och SuperAgent.
Nu sätter vi igång!
Vad är en JavaScript HTTP-förfrågan?
HTTP-förfrågningar i JavaScript är en uppsättning av fördefinierade metoder. De används för att interagera med data som lagras på servrar.
Varje begäran som skickas till en server innehåller en slutpunkt och den typ av begäran som skickas. Du kan se en slutpunkt som en gateway mellan två applikationer klienten och servern.
Klienten är den applikation som skickar en begäran medan servern är den applikation som tar emot begärandet. Servern skickar tillbaka ett svar beroende på om begärandet är giltigt. Om begärandet är framgångsrikt så skickar servern tillbaka data i antingen XML- eller JSON-format (JSON i de flesta fall). Om begärandet misslyckas så skickar servern tillbaka ett felmeddelande.
De svar som skickas tillbaka av servern är vanligtvis kopplade till statuskoder. Dessa koder hjälper oss att förstå vad servern försöker säga när den tar emot en begäran. Här är några av dem och vad de betyder:
- 100-199 betecknar ett informationssvar.
- 200-299 anger att begärandet har godkänts.
- 300-399 betecknar en omdirigering.
- 400-499 anger ett klientfel.
- 500-599 anger ett serverfel.
Vi kommer att tala mer om några av dessa i de följande avsnitten.
I nästa avsnitt så beskriver vi olika sätt att göra HTTP-begäranden på i JavaScript.
Hur man gör en HTTP-begäran i JavaScript
Det här avsnittet kommer att delas in i underavsnitt. Varje avsnitt lär dig olika metoder som du kan använda för att göra HTTP-begäranden i JavaScript.
Varje metod som diskuteras kommer att ha ett exempel som visar hur man skickar POST-, GET-, PUT/PATCH- och DELETE-begäranden till servrar.
JSON Placeholder kommer att fungera som fjärrserver/slutpunkt dit alla våra begäranden kommer att skickas.
Låt oss köra igång!
1. Hur man gör en HTTP-förfrågan i JavaScript med XMLHttpRequest (AJAX)
XMLHttpRequest är ett inbyggt JavaScript-objekt som används för att interagera med servrar och ladda innehåll på webbsidor utan att webbläsaren laddas om.
I det här avsnittet så får du se hur du skickar POST-, GET-, PUT/PATCH- och DELETE-begäranden med hjälp av XMLHttpRequest.
AJAX används för att göra asynkrona HTTP-begäranden. Detta innebär helt enkelt att medan ett svar från en begäran väntar så kan andra delar av din JavaScript-kod fortsätta att köras. Som ett resultat så slipper de att vänta på att begärandet ska slutföras.
Med hjälp av AJAX så kan du även skicka ändringar till en viss del av din webbsida utan att tvinga besökaren att ladda om hela sidan.
AJAX arbetar som standard med XMLHttpRequest-objektet. Exemplen i det här avsnittet kan med andra ord betraktas som AJAX-begäranden.
Hur man skickar en GET-begäran i JavaScript med XMLHttpRequest
Du använder GET-begäran när du vill hämta data från en server. Om du vill skicka en framgångsrik GET-begäran med XMLHttpRequest i JavaScript så ska du se till att följande görs korrekt:
- Skapa ett nytt XMLHttpRequest-objekt.
- Öppna en anslutning genom att ange begärandetyp och slutpunkt (serverns webbadress).
- Skicka begärandet.
- Lyssna på serverns svar.
Nu när vi har sett några av stegen för att skicka en POST-begäran med XMLHttpRequest, så kan vi titta på ett kodexempelː
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 bryter ner koden ovan för att hjälpa dig att förstå vad som händer här.
Det första som vi gjorde var att skapa ett nytt XMLHttpRequest-objekt och lagra det i en variabel som heter xhr. Det vill säga:
const xhr = new XMLHttpRequest();Vi specificerade sedan begärandetypen (GET) och slutpunkten dit begärandet kommer att skickas (i det här fallet”https://jsonplaceholder.typicode.com/users”):
xhr.open("GET", "https://jsonplaceholder.typicode.com/users");För att skicka begärandet till servern så använde vi metoden send().
När servern skickar tillbaka data så kan du ange i vilket format som datan returneras.
I de flesta fall används JSON. Så vi såg till att våra data returnerades i JSON genom att lägga till detta:
xhr.responseType = "json";Nu har vi skickat en GET-begäran med framgång. Nästa sak att göra är att lyssna på vad servern säger genom att använda en händelselistare:
xhr.onload = () => {
if (xhr.readyState == 4 && xhr.status == 200) {
const data = xhr.response;
console.log(data);
} else {
console.log(`Error: ${xhr.status}`);
}
};I koden ovan så använder vi oss av onload-händelselistare. Med hjälp av ett if-meddelande så kontrollerade vi statusen på serverns svar.
Om klientens status är 4 (DONE) och om statuskoden är 200 (framgångsrik) så loggas uppgifterna till konsolen. I annat fall så visas ett felmeddelande som visar felstatusen.
Om du har följt med fram till denna punkt utan några fel så bör du ha en array av objekt i din konsolː
[{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]Detta är datan som hämtas från servern.
Hur man skickar en POST-begäran i JavaScript med XMLHttpRequest
Med POST-begäran så kan du skicka ny information (data) till servern/databasen som ett objekt. Objektet kan vara information om en ny användare, en ny post i en att-göra-lista eller vad du än behöver logga.
Det kodexempel som du kommer att se i det här avsnittet liknar koden i det förra avsnittet. Den största skillnaden är att POST-begäranden kräver viss information som vanligtvis lagras i ett objekt innan den skickas till servern.
Här är ett exempel:
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 ovan så lagras informationen som ska skickas till servern i en variabel som heter body. Den innehåller tre egenskaperː title, body och userId.
Observera att variabeln body som innehåller objektet måste konverteras till ett JSON-objekt innan det skickas till servern. Konverteringen görs med hjälp av metoden JSON.stringify().
För att se till att JSON-objektet skickas till servern så skickas det in som en parameter till metoden send():
xhr.send(body);Hur man skickar en PATCH-begäran i JavaScript med XMLHttpRequest
PATCH-begäran används för att uppdatera angivna egenskaper hos ett objekt. Detta skiljer sig från PUT-metoden, som uppdaterar hela objektet.
Här är ett exempel på en PATCH-förfrågan med hjälp av 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);Om koden ovan lyckas så loggas den del av objektet som uppdaterades och skickades till servern.
Hur man skickar en DELETE-begäran i JavaScript med XMLHttpRequest
Precis som namnet antyder så används DELETE-metoden för att ta bort data från en server. Detta är samma sak för alla JavaScript HTTP-metoder.
I de flesta fall så måste du ange ID för de data som du vill ta bort. ID: t är vanligtvis en parameter i slutpunkten/webbadressen.
Låt oss se ett exempel på en DELETE-begäran:
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 ovan kommer att radera ett objekt med en POST med ID 3 som anges i slutpunkten (”https://jsonplaceholder.typicode.com/posts/3”).
2. Hur man gör en HTTP-begäran i JavaScript med hjälp av jQuery
jQuery förenklar processen att hämta data från servrar genom att göra syntaxen kortare och mer okomplicerad.
I det här avsnittet så får du se hur du gör HTTP-begäranden med hjälp av olika jQuery-metoder.
Hur man skickar en GET-begäran i JavaScript med jQuery
jQuery ger oss metoden $.get() för att skicka GET-begäranden till servrar. Metoden tar in två parametrar – webbadressen till servern och en callback-funktion som körs om begärandet är framgångsrikt.
Här är ett exempel:
$.get("https://jsonplaceholder.typicode.com/users", (data, status) => {
console.log(data);
});Som framgår av koden ovan så tog metoden $.get() emot webbadressen (https://jsonplaceholder.typicode.com/users) och en anonym callback-funktion som parametrar.
Genom callback-funktionen så kan du få tillgång till data från begärandet och status för begärandet. I vårt eget fall så loggade vi uppgifterna till konsolen.
Så enkelt är det att skicka en GET-begäran med hjälp av jQuery.
Hur man skickar en POST-begäran i JavaScript med jQuery
För att skicka en POST-begäran med jQuery så använder vi metoden $.post(). Den tar tre parametrar – webbadressen, de data som ska skickas till servern och 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 ovan så skapade vi ett objekt som ska skickas till servern och lagrade det i en variabel som heter body. Denna variabel skickades in som en andra parameter i metoden $.post().
Med hjälp av callback-funktionen så loggade vi resultatet av begäran till konsolen.
3. Hur man gör asynkrona begäranden i jQuery med hjälp av metoden $.ajax()
Innan vi går vidare till att skicka PATCH- och DELETE-begäranden så ska vi tala om metoden $.ajax().
Metoden $.ajax() i jQuery används för att göra asynkrona begäranden.
Syntaxen skiljer sig från de andra.
Så här gör du en GET-begäran med hjälp av metoden $.ajax():
$.ajax({
url: "https://jsonplaceholder.typicode.com/users",
type: "GET",
success: function (result) {
console.log(result);
},
});Metoden $.ajax() har olika parametrar som vi kan använda.
I koden ovan så anger parametern url webbadressen till servern, type anger begärandetypen och parametern success anropar en callback-funktion om begärandet är framgångsrikt.
I nästa avsnitt så ser du hur du skickar PATCH- och DELETE-begäranden med hjälp av jQuery’s $.ajax()-metod.
Så här skickar du en PATCH-begäran i JavaScript med jQuerys $.ajax()-metod
I det här avsnittet så visas hur man skickar PATCH-begäranden med hjälp av jQuery’s metod $.ajax().
Här är 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 koden ovan så lagras egenskapen som ska uppdateras i variabeln body. Denna används sedan som värde för parametern data.
Om begärandet är framgångsrikt så utförs funktionen för parametern success.
Så här skickar du en DELETE-begäran i JavaScript med jQuerys metod $.ajax()
Att skicka en DELETE-begäran med hjälp av jQuery’s $.ajax()-metod kräver endast några få rader kod.
Här är ett exempel:
$.ajax({
url: "https://jsonplaceholder.typicode.com/posts/3",
type: "DELETE",
success: function (result) {
console.log(result)
},
});Som framgår det ovan så var allt som vi behövde göra att ange webbadressen med ID för det objekt som ska raderas. Vi angav även typen av begäran och en funktion som körs om begärandet är framgångsrikt.
Hur man använder metoden $.getJSON i jQuery
Metoden $.getJSON erbjuder ett kortare sätt att skicka GET-begäranden på.
För att göra en lyckad begäran så behöver du bara ange webbadressen och callback-funktionen. Här är ett exempel:
$.getJSON("https://jsonplaceholder.typicode.com/users", function (result) {
console.log(result)
});I koden ovan så har vi skickat in webbadressen till servern och funktionen som körs efter att begärandet har lyckats som parametrar till $.getJSON-metoden.
Koden ovan kommer att logga en matris av objekt som innehåller användarinformation till konsolen.
4. Så här gör du en HTTP-begäran i JavaScript med hjälp av Fetch API: et
API: et fetch är ett av de mest populära sätten att interagera med servrar med hjälp av JavaScript. Det är ett inbygt JavaScript API som har stöd för löften när man gör begäranden.
Syntaxen för att använda fetch API: et är mycket lätt att förstå, vilket du kommer att se i avsnitten som följer.
Hur man skickar en GET-begäran i JavaScript med hjälp av Fetch API: et
För att skicka en GET-begäran med hjälp av fetch API så krävs endast webbadressen. Detta returnerar sedan ett löfte som du kan få tillgång till med hjälp av metoden then() eller nyckelorden async och await.
Låt oss titta på ett exempel:
fetch("https://jsonplaceholder.typicode.com/posts")
.then((response) => response.json())
.then((json) => console.log(json));I koden ovan så skickade vi in webbadressen till metoden fetch, som returnerar ett löfte. Vi fick sedan tillgång till serverns svar med hjälp av metoden then(). Svaret konverterades till ett JSON-objekt med hjälp av metoden response.json().
Efter att ha fått svaret så använde vi sedan en annan then()-metod för att logga ut data till konsolen.
Hur man skickar en POST-begäran i JavaScript med hjälp av Fetch API
Metoden fetch har en andra parameter som gör att vi kan ange body (data som ska skickas) och typ av begäran som ska skickas. Med denna andra parameter så kan vi skicka POST- och PATCH-begäranden.
Ta en titt på den här exempelkoden:
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 ovan så har vi lagt till begärandealternativ i den andra parametern för metoden fetch. method användes för att ange förfrågningstyp, body angav de data som ska skickas till servern och headers användes för att ange att vi ska skicka JSON-data till servern.
Precis som tidigare när vi skickade en GET-begäran så fick vi tillgång till det returnerade löftet/svaret med hjälp av metoden then().
Så här skickar du en PUT-begäran i JavaScript med hjälp av Fetch API:et
I ett annat avsnitt där vi skickade en begäran för att uppdatera ett objekt i servern så använde vi oss av PATCH. I det här avsnittet använder vi PUT, som låter dig uppdatera hela objekt.
Här är ett exempel med hjälp av 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));Eftersom vi skickar en PUT-begäran så måste vi ange de data som ska uppdateras. Detta skickas som ett värde till body-begärandealternativet.
Vi har även angett ID för det objekt som ska uppdateras som den sista parametern i webbadressen. Om begärandet körs framgångsrikt så bör du se det uppdaterade objektet loggas in i konsolen.
Så här skickar du en DELETE-begäran i JavaScript med hjälp av Fetch API: et
Att skicka en DELETE-begäran är ganska enkelt – allt du behöver göra är att ange ID för det objekt som ska tas bort. Du kan använda metoden then() för att ta emot svaret från servern, precis som vi gjorde med de andra begärandena.
Här är ett snabbt exempel:
fetch("https://jsonplaceholder.typicode.com/posts/3", {
method: "DELETE",
});Koden ovan raderar ett objekt med ID 3.
5. Hur man gör en HTTP-förfrågan i JavaScript med Axios
Axios är ett tredjepartsbibliotek som är baserat på löften för att skicka HTTP-begäranden. Precis som de flesta moderna HTTP-klienter så förenklar det processen med att skicka begäranden till en server.
I det här avsnittet så lär du dig hur du skickar GET-, POST-, PUT- och DELETE-begäranden till en server med hjälp av Axios.
Observera att Axios inte är inbyggt i JavaScript – du måste installera det separat för att kunna använda dess funktionalitet. För att installera Axios i ditt projekt så kör du kommandot nedan i din projektterminal:
npm install axiosHur man skickar en GET-begäran i JavaScript med hjälp av Axios
För att skicka en GET-begäran med hjälp av Axios så behöver du bara skicka in webbadressen till metoden get(), som returnerar ett löfte. Svaret som returneras från löftet kan nås med hjälp av metoden then().
Låt oss se ett exempel:
axios.get("https://jsonplaceholder.typicode.com/posts")
.then((response) => console.log(response.data))
.catch((error) => console.log(error));Koden ovan kommer att logga ut en matris av objekt som innehåller data som har returnerats från servern. Du märker att vi inte behövde ändra de returnerade objekten till JSON-objekt – Axios hanterar detta under huven. Du kan få tillgång till data med hjälp av response.data.
För att fånga upp eventuella fel så använde vi metoden catch().
Hur man skickar en POST-begäran i JavaScript med Axios
POST-begäran i Axios tar två parametrar – webbadressen och de data som ska skickas till servern. Du kan lagra data i en variabel eller skicka den direkt som en parameter.
Så här går det till:
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 exemplet ovan så skickar vi data till servern. Uppgifterna skickas in som en andra parameter till metoden post().
Om begärandet skickas framgångsrikt så ser du resultatet loggat i konsolen.
Så här skickar du en PUT-begäran i JavaScript med Axios
Att skicka en PUT-begäran med Axios liknar att skicka en POST-begäran. För att skicka en PUT-begäran så anger du webbadressen (inklusive ID för det objekt som ska uppdateras) och de data som ska uppdateras som en andra parameter i put()-metoden.
Exemplet nedan uppdaterar ett 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å här skickar du en DELETE-begäran i JavaScript med Axios
För att skicka en DELETE-begäran så anger du ID för det objekt som ska tas bort i webbadressen.
Du måste som vanligt ange webbadressen tillsammans med ID: t för det objekt som ska tas bort.
Här är ett exempel:
axios.delete("https://jsonplaceholder.typicode.com/posts/10")
.then(function (response) {
console.log(response);
})
.then((error) => console.log(error))6. Hur man gör en HTTP-begäran i JavaScript med SuperAgent: exempel
SuperAgent är ett av de äldsta biblioteken som har byggts för att göra HTTP-begäranden i JavaScript. Precis som Axios så har det stöd för löften och förbyggda metoder för att skicka olika HTTP-begäranden till servrar.
För att använda SuperAgent så installerar du det med hjälp av kommandot nedan:
npm install superagentVi börjar med ett exempel på en GET-begäran.
Hur man skickar en GET-begäran i JavaScript med SuperAgent
SuperAgent ger oss en get()-metod för att skicka GET-begäranden. Webbadressen skickas in som metodens parameter.
Det löfte som returneras från begärandet kan sedan bedömas med hjälp av metoden end(), som vi ser i det här exemplet:
superagent
.get("https://jsonplaceholder.typicode.com/posts")
.end((error, response) => {
console.log(response.body);
});Hur man skickar en POST-begäran i JavaScript med SuperAgent
När du skickar en POST-begäran med SuperAgent så skickar du in de data som ska skickas till servern som en parameter till SuperAgent-metoden send():
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 ovan så skickas webbadressen in som parameter till post()-metoden. De data som ska skickas blir sedan inskickade i send()-metoden. Med hjälp av metoden end() så fick vi resultatet av serverns svar.
Hur man skickar en PUT-begäran i JavaScript med SuperAgent
Du kan skicka en PUT-begäran i SuperAgent med hjälp av metoden put(). Precis som i exemplet i det sista avsnittet så skulle de data som ska uppdateras skickas in som en parameter till send()-metoden.
Här är ett exempel:
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);
});Hur man skickar en DELETE-begäran i JavaScript med SuperAgent
För att skicka en begäran om radering så anger du helt enkelt ID: et för det objekt som ska raderas i webbadressen. Detta kommer att användas som en parameter i metoden delete().
superagent
.delete("https://jsonplaceholder.typicode.com/posts/10")
.end((err, res) => {
console.log(res.body);
});7. Hur man gör en HTTP-begäran i JavaScript med Qwest
Qwest är ett AJAX-bibliotek för interaktion med servrar. Det är för närvarande arkiverat på GitHub – skaparen avbröt underhållet av biblioteket när fetch-API och Axios kom till.
Qwest stöder också användningen av löften.
I följande underavsnitt så kommer du att se hur du skickar GET-, POST-, PUT- och DELETE-begäranden med hjälp av Qwest.
Hur man skickar en GET-begäran i JavaScript med Qwest
Qwest har en get()-metod som kan användas för att skicka GET-begäranden. Så här använder du den:
qwest.get("https://jsonplaceholder.typicode.com/posts")
.then((xhr, response) => console.log(response));Hur man skickar en POST-begäran i JavaScript med Qwest
Som en andra parameter så skickas de data som ska skickas till en server till post()-metoden. Den första parametern är webbadressen.
Här är ett exempel:
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)
});Hur man skickar en PUT-begäran i JavaScript med Qwest
Syntaxen här är densamma som i föregående avsnitt. Det enda som du behöver ändra är begärandetypen och sedan ange ID för det objekt som ska uppdateras tillsammans med de data som du vill uppdatera objektet med.
Ta en titt på det här exemplet:
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)
});Observera att ID: t anges i webbadressen och inte i det objekt som skickas till servern.
Hur man skickar en DELETE-begäran i JavaScript med Qwest
För att ta bort ett objekt från en server så måste du som vanligt ange webbadress och ID för det objekt som ska tas bort. Både webbadress och ID för det objekt som ska tas bort skickas in som en parameter till metoden delete() i Qwest.
Här är ett exempel:
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 begärandet körs framgångsrikt så kommer ett objekt med ID 30 att tas bort.
Sammanfattning
Vår förmåga att interagera med servrar med hjälp av JavaScript har utvecklats under årens lopp. Det finns ett växande och aktivt community av JavaScript-utvecklare. Som ett resultat så görs det fortfarande ständiga ändringar och nya verktyg införs för att göra processen enklare och lättare.
De metoder som diskuteras i den här handledningen gäller inte bara fjärrservrar – de kan också användas för att interagera med dina egna servrar när du bygger fullständiga webbapplikationer. De fungerar även med många JavaScript-bibliotek och ramverk.
I den här handledningen så har vi lärt dig hur du gör HTTP-begäranden i JavaScript. Vi gav olika exempel och förklaringar som visade hur man skickar GET-, POST-, PUT/PATCH- och DELETE-begäranden med hjälp av inbyggda JavaScript-metoder och bibliotek från tredje part.
Att bygga och distribuera en webbplats kan vara en tråkig uppgift oavsett dina kunskaper. Men Kinsta gör detta enkelt och friktionsfritt med DevKinsta. DevKinsta används av över 25 000 utvecklare, webbdesigners och frilansare och erbjuder en lokal miljö för utveckling av WordPress-teman, plugins med mera. Kolla in det!
