Henting og Arbeid med API-er i JavaScript
Hva er et API, og hvordan samhandler vi med det?
Et API (Application Programming Interface) er et sett med regler og protokoller som gjør det mulig for ulike programvareapplikasjoner å kommunisere med hverandre.
Innen webutvikling gjør API-er det mulig for JavaScript-koden din å samhandle med eksterne tjenester, som å hente data fra en server, sende inn skjemadata eller integrere tredjepartstjenester.
I moderne JavaScript-applikasjoner brukes API-er ofte til å:
- Hente data fra en server (for eksempel hente værdata, nyhetsartikler eller produktdetaljer);
- Sende data til en server (for eksempel sende inn et skjema eller lagre brukerpreferanser);
- Arbeide med tredjepartstjenester (for eksempel Google Maps, Twitter API, betalingsløsninger).
Vi samhandler med API-er ved å sende HTTP-forespørsler til et API-endepunkt, og serveren svarer med data, vanligvis i JSON-format.
Hvis du er ny til JSON eller ønsker en dypere forståelse av hvordan det fungerer, kan du lese artikkelen Understanding and Working with JSON Data
Sende HTTP-forespørsler med fetch()
Funksjonen fetch() er en moderne metode for å utføre nettverksforespørsler i JavaScript. Den returnerer et Promise, som løses når forespørselen er fullført.
index.html
index.js
Dette eksempelet illustrerer hvordan man gjør en HTTP GET-forespørsel til et API ved å bruke fetch(). Funksjonen fetchData sender en forespørsel til den angitte endepunktet (https://jsonplaceholder.typicode.com/posts/1). Når svaret mottas, tolker response.json() JSON-dataene. Tittelen på innlegget hentes deretter ut fra de tolkede dataene og vises i HTML-avsnittet.
Håndtering av API-responser: Parsing av JSON og sjekking av responsstatus
Etter at en API-forespørsel er sendt, er det viktig å kontrollere om forespørselen var vellykket og håndtere svaret korrekt. I de fleste tilfeller returneres data fra et API i JSON-format, så det er nødvendig å tolke det ved hjelp av response.json().
I tillegg bør du alltid kontrollere responsstatus for å sikre at forespørselen var vellykket (statuskode 200–299).
index.html
index.js
Dette eksempelet viser hvordan man håndterer responsstatusen til en API-forespørsel. Funksjonen fetchAndCheckStatus sender en forespørsel til et API-endepunkt, og sjekker deretter om responsen er vellykket ved å bruke response.ok, som returnerer true for statuskoder i området 200–299. Hvis forespørselen er vellykket, blir JSON-dataen tolket og vist. Hvis forespørselen mislykkes, vises feilkoden i HTML-en.
Feilhåndtering med API-er og håndtering av nettverksfeil
Når du arbeider med API-er, er det viktig å håndtere potensielle feil som:
- Nettverksfeil: Serveren kan være utilgjengelig på grunn av nettverksproblemer;
- Ugyldige responser: API-et kan returnere en feil (f.eks. 404 Not Found eller 500 Server Error).
Du kan håndtere feil ved å bruke try...catch sammen med fetch() for å håndtere både nettverksfeil og API-responsfeil.
index.html
index.js
Dette eksempelet viser hvordan man håndterer API-feil på en effektiv måte. Funksjonen fetchWithErrorHandling bruker try...catch for å håndtere både nettverksfeil og ugyldige API-responser. Hvis forespørselen til den ugyldige URL-en mislykkes, eller hvis responsens statuskode er utenfor området 200–299, kastes en feil med en spesifikk melding. catch-blokken viser deretter feilmeldingen i HTML-en. Denne metoden sikrer at eventuelle problemer med API-kallet, som en feil endepunkt eller tilkoblingsproblemer, håndteres på en ryddig måte og kommuniseres tydelig til brukeren.
1. Hva returnerer funksjonen fetch()?
2. Hva er hensikten med å bruke try...catch sammen med fetch()?
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
Awesome!
Completion rate improved to 2.22Henting og Arbeid med API-er i JavaScript
Sveip for å vise menyen
Hva er et API, og hvordan samhandler vi med det?
Et API (Application Programming Interface) er et sett med regler og protokoller som gjør det mulig for ulike programvareapplikasjoner å kommunisere med hverandre.
Innen webutvikling gjør API-er det mulig for JavaScript-koden din å samhandle med eksterne tjenester, som å hente data fra en server, sende inn skjemadata eller integrere tredjepartstjenester.
I moderne JavaScript-applikasjoner brukes API-er ofte til å:
- Hente data fra en server (for eksempel hente værdata, nyhetsartikler eller produktdetaljer);
- Sende data til en server (for eksempel sende inn et skjema eller lagre brukerpreferanser);
- Arbeide med tredjepartstjenester (for eksempel Google Maps, Twitter API, betalingsløsninger).
Vi samhandler med API-er ved å sende HTTP-forespørsler til et API-endepunkt, og serveren svarer med data, vanligvis i JSON-format.
Hvis du er ny til JSON eller ønsker en dypere forståelse av hvordan det fungerer, kan du lese artikkelen Understanding and Working with JSON Data
Sende HTTP-forespørsler med fetch()
Funksjonen fetch() er en moderne metode for å utføre nettverksforespørsler i JavaScript. Den returnerer et Promise, som løses når forespørselen er fullført.
index.html
index.js
Dette eksempelet illustrerer hvordan man gjør en HTTP GET-forespørsel til et API ved å bruke fetch(). Funksjonen fetchData sender en forespørsel til den angitte endepunktet (https://jsonplaceholder.typicode.com/posts/1). Når svaret mottas, tolker response.json() JSON-dataene. Tittelen på innlegget hentes deretter ut fra de tolkede dataene og vises i HTML-avsnittet.
Håndtering av API-responser: Parsing av JSON og sjekking av responsstatus
Etter at en API-forespørsel er sendt, er det viktig å kontrollere om forespørselen var vellykket og håndtere svaret korrekt. I de fleste tilfeller returneres data fra et API i JSON-format, så det er nødvendig å tolke det ved hjelp av response.json().
I tillegg bør du alltid kontrollere responsstatus for å sikre at forespørselen var vellykket (statuskode 200–299).
index.html
index.js
Dette eksempelet viser hvordan man håndterer responsstatusen til en API-forespørsel. Funksjonen fetchAndCheckStatus sender en forespørsel til et API-endepunkt, og sjekker deretter om responsen er vellykket ved å bruke response.ok, som returnerer true for statuskoder i området 200–299. Hvis forespørselen er vellykket, blir JSON-dataen tolket og vist. Hvis forespørselen mislykkes, vises feilkoden i HTML-en.
Feilhåndtering med API-er og håndtering av nettverksfeil
Når du arbeider med API-er, er det viktig å håndtere potensielle feil som:
- Nettverksfeil: Serveren kan være utilgjengelig på grunn av nettverksproblemer;
- Ugyldige responser: API-et kan returnere en feil (f.eks. 404 Not Found eller 500 Server Error).
Du kan håndtere feil ved å bruke try...catch sammen med fetch() for å håndtere både nettverksfeil og API-responsfeil.
index.html
index.js
Dette eksempelet viser hvordan man håndterer API-feil på en effektiv måte. Funksjonen fetchWithErrorHandling bruker try...catch for å håndtere både nettverksfeil og ugyldige API-responser. Hvis forespørselen til den ugyldige URL-en mislykkes, eller hvis responsens statuskode er utenfor området 200–299, kastes en feil med en spesifikk melding. catch-blokken viser deretter feilmeldingen i HTML-en. Denne metoden sikrer at eventuelle problemer med API-kallet, som en feil endepunkt eller tilkoblingsproblemer, håndteres på en ryddig måte og kommuniseres tydelig til brukeren.
1. Hva returnerer funksjonen fetch()?
2. Hva er hensikten med å bruke try...catch sammen med fetch()?
Takk for tilbakemeldingene dine!
