Integrering av API:er i JavaScript-applikationer
Vid arbete med API:er är de vanligaste HTTP-metoderna GET och POST:
- GET: Används för att hämta data från en server;
- POST: Används för att skicka data till en server, vanligtvis vid formulärinlämning eller när JSON-data skickas.
Exempel på GET-begäran
En GET-begäran hämtar data från en server utan att ändra några resurser.
index.html
index.js
fetchPost-funktionen använder metoden fetch() för att skicka en begäran till en angiven slutpunkt (/posts/1). När svaret tas emot tolkas data som JSON, och inläggets titel extraheras och visas i HTML-paragrafen.
Exempel på POST-begäran
En POST-begäran skickar data till servern, ofta använd för att skapa nya resurser eller skicka formulärdata.
index.html
index.js
sendPostRequest-funktionen gör en begäran till den angivna slutpunkten (/posts) med method satt till 'POST'. Rubrikerna inkluderar 'Content-Type': 'application/json' för att indikera att JSON-data skickas. body innehåller JSON-formaterad data med information för ett nytt inlägg, såsom title, body och userId. Efter begäran tolkas serverns svar som JSON, och titeln på det skapade inlägget visas i HTML-koden.
Skicka rubriker och hantera olika HTTP-metoder (GET, POST, PUT, DELETE)
Olika HTTP-metoder har olika syften. Förutom GET och POST är vanliga metoder:
- PUT: Används för att uppdatera en befintlig resurs;
- DELETE: Används för att ta bort en resurs från servern.
Du kan även skicka rubriker med valfri HTTP-metod för att tillhandahålla ytterligare information, såsom autentiseringstoken eller innehållstyp.
Exempel på PUT-begäran: Uppdatera data
index.html
index.js
updatePost-funktionen skickar en PUT-begäran till den angivna slutpunkten (/posts/1) för att uppdatera ett befintligt inlägg. Begäran inkluderar method: 'PUT' för att specificera uppdateringsåtgärden, och headers är inställda på att inkludera 'Content-Type': 'application/json', vilket indikerar JSON-format. body innehåller JSON-formaterad data, inklusive ett id, uppdaterad title, body och userId. När svaret tas emot tolkas det som JSON och den uppdaterade titeln visas i HTML.
DELETE-begäransexempel: Ta bort data
index.html
index.js
deletePost-funktionen skickar en DELETE-begäran till en angiven slutpunkt (/posts/1) för att ta bort ett specifikt inlägg. method: 'DELETE' anger åtgärden. Efter begäran kontrolleras svarstatusen med response.ok: om den lyckas visas ett meddelande om att borttagningen lyckades ("Post deleted successfully.") i HTML-koden. Om borttagningen misslyckas visas istället ett felmeddelande.
Användning av frågeparametrar i API-förfrågningar
Frågeparametrar gör det möjligt att skicka ytterligare information i URL:en, såsom att filtrera data, sortera resultat eller ange sidnummer i paginerade svar.
GET-begäran med frågeparametrar
index.html
index.js
Funktionen fetchPostsByUser skickar en begäran till ett API-endpoint med en frågeparameter (userId=1), vilket filtrerar inlägg till endast de som tillhör den angivna användaren. userId läggs till direkt i URL:en som en frågeparameter. Efter att ha mottagit de filtrerade uppgifterna visar funktionen antalet inlägg som hittats för den användaren i HTML-koden.
1. Vilken HTTP-metod används för att hämta data från en server utan att ändra några resurser?
2. Vilket av följande bekräftar en lyckad DELETE-begäran?
Tack för dina kommentarer!
Fråga AI
Fråga AI
Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal
Can you explain the difference between GET and POST requests in more detail?
How do I use headers with different HTTP methods?
Can you provide examples of using query parameters in API requests?
Awesome!
Completion rate improved to 2.22Integrering av API:er i JavaScript-applikationer
Svep för att visa menyn
Vid arbete med API:er är de vanligaste HTTP-metoderna GET och POST:
- GET: Används för att hämta data från en server;
- POST: Används för att skicka data till en server, vanligtvis vid formulärinlämning eller när JSON-data skickas.
Exempel på GET-begäran
En GET-begäran hämtar data från en server utan att ändra några resurser.
index.html
index.js
fetchPost-funktionen använder metoden fetch() för att skicka en begäran till en angiven slutpunkt (/posts/1). När svaret tas emot tolkas data som JSON, och inläggets titel extraheras och visas i HTML-paragrafen.
Exempel på POST-begäran
En POST-begäran skickar data till servern, ofta använd för att skapa nya resurser eller skicka formulärdata.
index.html
index.js
sendPostRequest-funktionen gör en begäran till den angivna slutpunkten (/posts) med method satt till 'POST'. Rubrikerna inkluderar 'Content-Type': 'application/json' för att indikera att JSON-data skickas. body innehåller JSON-formaterad data med information för ett nytt inlägg, såsom title, body och userId. Efter begäran tolkas serverns svar som JSON, och titeln på det skapade inlägget visas i HTML-koden.
Skicka rubriker och hantera olika HTTP-metoder (GET, POST, PUT, DELETE)
Olika HTTP-metoder har olika syften. Förutom GET och POST är vanliga metoder:
- PUT: Används för att uppdatera en befintlig resurs;
- DELETE: Används för att ta bort en resurs från servern.
Du kan även skicka rubriker med valfri HTTP-metod för att tillhandahålla ytterligare information, såsom autentiseringstoken eller innehållstyp.
Exempel på PUT-begäran: Uppdatera data
index.html
index.js
updatePost-funktionen skickar en PUT-begäran till den angivna slutpunkten (/posts/1) för att uppdatera ett befintligt inlägg. Begäran inkluderar method: 'PUT' för att specificera uppdateringsåtgärden, och headers är inställda på att inkludera 'Content-Type': 'application/json', vilket indikerar JSON-format. body innehåller JSON-formaterad data, inklusive ett id, uppdaterad title, body och userId. När svaret tas emot tolkas det som JSON och den uppdaterade titeln visas i HTML.
DELETE-begäransexempel: Ta bort data
index.html
index.js
deletePost-funktionen skickar en DELETE-begäran till en angiven slutpunkt (/posts/1) för att ta bort ett specifikt inlägg. method: 'DELETE' anger åtgärden. Efter begäran kontrolleras svarstatusen med response.ok: om den lyckas visas ett meddelande om att borttagningen lyckades ("Post deleted successfully.") i HTML-koden. Om borttagningen misslyckas visas istället ett felmeddelande.
Användning av frågeparametrar i API-förfrågningar
Frågeparametrar gör det möjligt att skicka ytterligare information i URL:en, såsom att filtrera data, sortera resultat eller ange sidnummer i paginerade svar.
GET-begäran med frågeparametrar
index.html
index.js
Funktionen fetchPostsByUser skickar en begäran till ett API-endpoint med en frågeparameter (userId=1), vilket filtrerar inlägg till endast de som tillhör den angivna användaren. userId läggs till direkt i URL:en som en frågeparameter. Efter att ha mottagit de filtrerade uppgifterna visar funktionen antalet inlägg som hittats för den användaren i HTML-koden.
1. Vilken HTTP-metod används för att hämta data från en server utan att ändra några resurser?
2. Vilket av följande bekräftar en lyckad DELETE-begäran?
Tack för dina kommentarer!
