Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lære Integrering av API-er i JavaScript-applikasjoner | Asynkron JavaScript og API-integrasjon
Avansert JavaScript-mestring

bookIntegrering 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.

index.html

index.html

index.js

index.js

copy

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.

index.html

index.html

index.js

index.js

copy

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

index.html

index.html

index.js

index.js

copy

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

index.html

index.html

index.js

index.js

copy

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

index.html

index.html

index.js

index.js

copy

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.

1. Hvilken HTTP-metode brukes for å hente data fra en server uten å endre noen ressurser?

2. Hvilket av følgende bekrefter en vellykket DELETE-forespørsel?

question mark

Hvilken HTTP-metode brukes for å hente data fra en server uten å endre noen ressurser?

Select the correct answer

question mark

Hvilket av følgende bekrefter en vellykket DELETE-forespørsel?

Select the correct answer

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 4. Kapittel 6

Spør AI

expand

Spør AI

ChatGPT

Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår

Suggested prompts:

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.22

bookIntegrering av API-er i JavaScript-applikasjoner

Sveip for å vise menyen

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.

index.html

index.html

index.js

index.js

copy

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.

index.html

index.html

index.js

index.js

copy

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

index.html

index.html

index.js

index.js

copy

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

index.html

index.html

index.js

index.js

copy

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

index.html

index.html

index.js

index.js

copy

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.

1. Hvilken HTTP-metode brukes for å hente data fra en server uten å endre noen ressurser?

2. Hvilket av følgende bekrefter en vellykket DELETE-forespørsel?

question mark

Hvilken HTTP-metode brukes for å hente data fra en server uten å endre noen ressurser?

Select the correct answer

question mark

Hvilket av følgende bekrefter en vellykket DELETE-forespørsel?

Select the correct answer

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 4. Kapittel 6
some-alt