Integrering av API-er i JavaScript-applikasjoner

Når du arbeider med API-er, er de vanligste HTTP-metodene GET og POST:

• GET: Brukes for å hente data fra en server;
• POST: Brukes for å sende data til en server, vanligvis ved innsending av skjemaer eller sending av JSON-data.

Eksempel på GET-forespørsel

En GET-forespørsel henter data fra en server uten å endre noen ressurser.

Funksjonen fetchPost bruker metoden fetch() for å sende en forespørsel til et spesifisert endepunkt (/posts/1). Når svaret mottas, blir dataene tolket som JSON, og tittelen på innlegget blir hentet ut og vist i HTML-avsnittet.

Eksempel på POST-forespørsel

En POST-forespørsel sender data til serveren, ofte brukt for å opprette nye ressurser eller sende inn skjemadata.

Funksjonen sendPostRequest sender en forespørsel til det angitte endepunktet (/posts) med method satt til 'POST'. Headerne inkluderer 'Content-Type': 'application/json' for å indikere at JSON-data sendes. body inneholder JSON-formatert data med detaljer for et nytt innlegg, som title, body og userId. Etter forespørselen blir serverens respons tolket som JSON, og tittelen på det opprettede innlegget vises i HTML-en.

Sending av headere og håndtering av ulike HTTP-metoder (GET, POST, PUT, DELETE)

Ulike HTTP-metoder har ulike formål. I tillegg til GET og POST er vanlige metoder:

• PUT: Brukes til å oppdatere en eksisterende ressurs;
• DELETE: Brukes til å fjerne en ressurs fra serveren.

Du kan også sende headere med enhver HTTP-metode for å gi tilleggsinformasjon, som autentiseringstokener eller innholdstype.

Eksempel på PUT-forespørsel: Oppdatering av data

Funksjonen updatePost sender en PUT-forespørsel til det angitte endepunktet (/posts/1) for å oppdatere et eksisterende innlegg. Forespørselen inkluderer method: 'PUT' for å angi oppdateringshandlingen, og headers er satt til å inkludere 'Content-Type': 'application/json', som indikerer JSON-format. body inneholder data i JSON-format, inkludert en id, oppdatert title, body og userId. Når svaret mottas, blir det tolket som JSON, og den oppdaterte tittelen vises i HTML-en.

Eksempel på DELETE-forespørsel: Fjerne data

Funksjonen deletePost sender en DELETE-forespørsel til et spesifisert endepunkt (/posts/1) for å slette et bestemt innlegg. method: 'DELETE' angir handlingen. Etter forespørselen kontrolleres svarstatusen med response.ok: hvis vellykket, vises en suksessmelding ("Innlegg slettet.") i HTML-en. Hvis slettingen mislykkes, vises i stedet en feilmelding.

Bruk av spørringsparametere i API-forespørsler

Spørringsparametere gjør det mulig å sende tilleggsinformasjon i URL-en, for eksempel filtrering av data, sortering av resultater eller spesifisering av sidetall i paginerte svar.

GET-forespørsel med spørringsparametere

Funksjonen fetchPostsByUser sender en forespørsel til et API-endepunkt med en spørringsparameter (userId=1), som filtrerer innleggene slik at kun de som tilhører den angitte brukeren vises. userId legges direkte til i URL-en som en spørringsparameter. Etter å ha mottatt de filtrerte dataene, viser funksjonen antall innlegg funnet for denne brukeren i HTML-en.