Hentning og Arbejde med API'er i JavaScript
Hvad er et API, og hvordan interagerer vi med det?
Et API (Application Programming Interface) er et sæt regler og protokoller, der gør det muligt for forskellige softwareapplikationer at kommunikere med hinanden.
Inden for webudvikling muliggør API'er, at din JavaScript-kode kan interagere med eksterne tjenester, såsom at hente data fra en server, indsende formularoplysninger eller integrere tredjepartstjenester.
I moderne JavaScript-applikationer anvendes API'er ofte til at:
- Hente data fra en server (f.eks. indhentning af vejrudsigter, nyhedsartikler eller produktinformation);
- Sende data til en server (f.eks. indsende en formular eller gemme brugerpræferencer);
- Arbejde med tredjepartstjenester (f.eks. Google Maps, Twitter API, betalingsgateways).
Vi interagerer med API'er ved at sende HTTP-forespørgsler til et API-endpoint, og serveren svarer med data, typisk i JSON-format.
Hvis du er ny til JSON eller ønsker en dybere forståelse af, hvordan det fungerer, kan du læse artiklen Understanding and Working with JSON Data
Afsendelse af HTTP-anmodninger med fetch()
Funktionen fetch() er en moderne metode til at foretage netværksanmodninger i JavaScript. Den returnerer et Promise, som opfyldes, når anmodningen er fuldført.
index.html
index.js
Dette eksempel illustrerer, hvordan man foretager en HTTP GET-anmodning til et API ved hjælp af fetch(). Funktionen fetchData sender en anmodning til det angivne endpoint (https://jsonplaceholder.typicode.com/posts/1). Når svaret modtages, parser response.json() JSON-dataene. Postens titel udtrækkes derefter fra de parrede data og vises i HTML-afsnittet.
Håndtering af API-svar: Parsing af JSON og kontrol af svartilstand
Efter afsendelse af en API-anmodning er det vigtigt at kontrollere, om anmodningen var vellykket, og håndtere svaret korrekt. I de fleste tilfælde returneres data fra et API i JSON-format, så det er nødvendigt at parse det med response.json().
Derudover bør du altid kontrollere svartilstanden for at sikre, at anmodningen var vellykket (statuskode 200–299).
index.html
index.js
Dette eksempel demonstrerer håndtering af svarkoder fra en API-forespørgsel. Funktionen fetchAndCheckStatus sender en forespørgsel til et API-endpoint og kontrollerer derefter, om svaret er vellykket ved hjælp af response.ok, som returnerer true for statuskoder i intervallet 200–299. Hvis forespørgslen lykkes, parses og vises JSON-dataene. Hvis forespørgslen mislykkes, vises fejlkoden i HTML'en.
Fejlhåndtering med API'er og håndtering af netværksfejl
Når du arbejder med API'er, er det afgørende at håndtere potentielle fejl såsom:
- Netværksfejl: Serveren kan være utilgængelig på grund af netværksproblemer;
- Ugyldige svar: API'et kan returnere en fejl (f.eks. 404 Not Found eller 500 Server Error).
Du kan håndtere fejl ved at bruge try...catch sammen med fetch() for at håndtere både netværksfejl og API-svarfejl.
index.html
index.js
Dette eksempel viser, hvordan man håndterer API-fejl effektivt. Funktionen fetchWithErrorHandling anvender try...catch til at håndtere både netværksfejl og ugyldige API-svar. Hvis anmodningen til den ugyldige URL mislykkes, eller hvis svarkoden ligger uden for intervallet 200–299, kastes en fejl med en specifik besked. catch-blokken viser derefter fejlbeskeden i HTML'en. Denne metode sikrer, at eventuelle problemer med API-kaldet, såsom en forkert endpoint eller forbindelsesproblemer, håndteres elegant og kommunikeres tydeligt til brugeren.
1. Hvad returnerer funktionen fetch()?
2. Hvad er formålet med at bruge try...catch sammen med fetch()?
Tak for dine kommentarer!
Spørg AI
Spørg AI
Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat
Awesome!
Completion rate improved to 2.22Hentning og Arbejde med API'er i JavaScript
Stryg for at vise menuen
Hvad er et API, og hvordan interagerer vi med det?
Et API (Application Programming Interface) er et sæt regler og protokoller, der gør det muligt for forskellige softwareapplikationer at kommunikere med hinanden.
Inden for webudvikling muliggør API'er, at din JavaScript-kode kan interagere med eksterne tjenester, såsom at hente data fra en server, indsende formularoplysninger eller integrere tredjepartstjenester.
I moderne JavaScript-applikationer anvendes API'er ofte til at:
- Hente data fra en server (f.eks. indhentning af vejrudsigter, nyhedsartikler eller produktinformation);
- Sende data til en server (f.eks. indsende en formular eller gemme brugerpræferencer);
- Arbejde med tredjepartstjenester (f.eks. Google Maps, Twitter API, betalingsgateways).
Vi interagerer med API'er ved at sende HTTP-forespørgsler til et API-endpoint, og serveren svarer med data, typisk i JSON-format.
Hvis du er ny til JSON eller ønsker en dybere forståelse af, hvordan det fungerer, kan du læse artiklen Understanding and Working with JSON Data
Afsendelse af HTTP-anmodninger med fetch()
Funktionen fetch() er en moderne metode til at foretage netværksanmodninger i JavaScript. Den returnerer et Promise, som opfyldes, når anmodningen er fuldført.
index.html
index.js
Dette eksempel illustrerer, hvordan man foretager en HTTP GET-anmodning til et API ved hjælp af fetch(). Funktionen fetchData sender en anmodning til det angivne endpoint (https://jsonplaceholder.typicode.com/posts/1). Når svaret modtages, parser response.json() JSON-dataene. Postens titel udtrækkes derefter fra de parrede data og vises i HTML-afsnittet.
Håndtering af API-svar: Parsing af JSON og kontrol af svartilstand
Efter afsendelse af en API-anmodning er det vigtigt at kontrollere, om anmodningen var vellykket, og håndtere svaret korrekt. I de fleste tilfælde returneres data fra et API i JSON-format, så det er nødvendigt at parse det med response.json().
Derudover bør du altid kontrollere svartilstanden for at sikre, at anmodningen var vellykket (statuskode 200–299).
index.html
index.js
Dette eksempel demonstrerer håndtering af svarkoder fra en API-forespørgsel. Funktionen fetchAndCheckStatus sender en forespørgsel til et API-endpoint og kontrollerer derefter, om svaret er vellykket ved hjælp af response.ok, som returnerer true for statuskoder i intervallet 200–299. Hvis forespørgslen lykkes, parses og vises JSON-dataene. Hvis forespørgslen mislykkes, vises fejlkoden i HTML'en.
Fejlhåndtering med API'er og håndtering af netværksfejl
Når du arbejder med API'er, er det afgørende at håndtere potentielle fejl såsom:
- Netværksfejl: Serveren kan være utilgængelig på grund af netværksproblemer;
- Ugyldige svar: API'et kan returnere en fejl (f.eks. 404 Not Found eller 500 Server Error).
Du kan håndtere fejl ved at bruge try...catch sammen med fetch() for at håndtere både netværksfejl og API-svarfejl.
index.html
index.js
Dette eksempel viser, hvordan man håndterer API-fejl effektivt. Funktionen fetchWithErrorHandling anvender try...catch til at håndtere både netværksfejl og ugyldige API-svar. Hvis anmodningen til den ugyldige URL mislykkes, eller hvis svarkoden ligger uden for intervallet 200–299, kastes en fejl med en specifik besked. catch-blokken viser derefter fejlbeskeden i HTML'en. Denne metode sikrer, at eventuelle problemer med API-kaldet, såsom en forkert endpoint eller forbindelsesproblemer, håndteres elegant og kommunikeres tydeligt til brugeren.
1. Hvad returnerer funktionen fetch()?
2. Hvad er formålet med at bruge try...catch sammen med fetch()?
Tak for dine kommentarer!
