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.

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.

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

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

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

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.