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.
index.html
index.js
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.js
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.js
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.js
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.js
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?
Takk for tilbakemeldingene dine!
Spør AI
Spør AI
Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår
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
Integrering 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.js
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.js
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.js
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.js
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.js
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?
Takk for tilbakemeldingene dine!