Hämta och Arbeta med API:er i JavaScript
Vad är ett API och hur interagerar vi med det?
Ett API (Application Programming Interface) är en uppsättning regler och protokoll som möjliggör kommunikation mellan olika mjukvaruapplikationer.
Inom webbutveckling möjliggör API:er att din JavaScript-kod kan interagera med externa tjänster, såsom att hämta data från en server, skicka formulärdata eller integrera tredjepartstjänster.
I moderna JavaScript-applikationer används API:er ofta för att:
- Hämta data från en server (t.ex. hämta väderdata, nyhetsartiklar eller produktinformation);
- Skicka data till en server (t.ex. skicka ett formulär eller spara användarinställningar);
- Arbeta med tredjepartstjänster (t.ex. Google Maps, Twitter API, betalningslösningar).
Vi interagerar med API:er genom att skicka HTTP-förfrågningar till ett API-endpoint, och servern svarar med data, vanligtvis i JSON-format.
Om du är ny på JSON eller vill få en djupare förståelse för hur det fungerar, läs artikeln Understanding and Working with JSON Data
Skicka HTTP-förfrågningar med fetch()
Funktionen fetch() är ett modernt sätt att göra nätverksförfrågningar i JavaScript. Den returnerar ett Promise, som löses när förfrågan är klar.
index.html
index.js
Detta exempel illustrerar hur man gör en HTTP GET-begäran till ett API med hjälp av fetch(). Funktionen fetchData skickar en begäran till den angivna slutpunkten (https://jsonplaceholder.typicode.com/posts/1). När svaret tas emot, tolkar response.json() JSON-datan. Inläggets titel extraheras sedan från den tolkade datan och visas i HTML-paragrafen.
Hantering av API-svar: Tolka JSON och kontrollera svarstatus
Efter att ha skickat en API-begäran är det viktigt att kontrollera om begäran lyckades och hantera svaret korrekt. I de flesta fall returneras data från ett API i JSON-format, så du behöver tolka det med response.json().
Dessutom bör du alltid kontrollera svarstatus för att säkerställa att begäran lyckades (statuskod 200–299).
index.html
index.js
Detta exempel visar hur man hanterar svarstatus från en API-förfrågan. Funktionen fetchAndCheckStatus skickar en förfrågan till en API-endpoint och kontrollerar sedan om svaret är lyckat med hjälp av response.ok, som returnerar true för statuskoder i intervallet 200–299. Om förfrågan lyckas tolkas och visas JSON-datan. Om förfrågan misslyckas visas felstatuskoden i HTML:en.
Felhantering med API:er och hantering av nätverksfel
Vid arbete med API:er är det avgörande att hantera potentiella fel såsom:
- Nätverksfel: Servern kan vara onåbar på grund av nätverksproblem;
- Ogiltiga svar: API:et kan returnera ett fel (t.ex. 404 Not Found eller 500 Server Error).
Du kan hantera fel genom att använda try...catch tillsammans med fetch() för att hantera både nätverksfel och API-svarsfel.
index.html
index.js
Detta exempel visar hur API-fel hanteras effektivt. Funktionen fetchWithErrorHandling använder try...catch för att hantera både nätverksfel och ogiltiga API-svar. Om begäran till den ogiltiga URL:en misslyckas, eller om svarskoden ligger utanför intervallet 200–299, kastas ett fel med ett specifikt meddelande. catch-blocket visar sedan felmeddelandet i HTML:en. Denna metod säkerställer att eventuella problem med API-anropet, såsom en felaktig slutpunkt eller anslutningsproblem, hanteras smidigt och kommuniceras tydligt till användaren.
1. Vad returnerar funktionen fetch()?
2. Vad är syftet med att använda try...catch med fetch()?
Tack för dina kommentarer!
Fråga AI
Fråga AI
Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal
Can you explain how to use the fetch() function in more detail?
What are some common HTTP status codes I should look out for when working with APIs?
How do I handle errors when making API requests in JavaScript?
Awesome!
Completion rate improved to 2.22Hämta och Arbeta med API:er i JavaScript
Svep för att visa menyn
Vad är ett API och hur interagerar vi med det?
Ett API (Application Programming Interface) är en uppsättning regler och protokoll som möjliggör kommunikation mellan olika mjukvaruapplikationer.
Inom webbutveckling möjliggör API:er att din JavaScript-kod kan interagera med externa tjänster, såsom att hämta data från en server, skicka formulärdata eller integrera tredjepartstjänster.
I moderna JavaScript-applikationer används API:er ofta för att:
- Hämta data från en server (t.ex. hämta väderdata, nyhetsartiklar eller produktinformation);
- Skicka data till en server (t.ex. skicka ett formulär eller spara användarinställningar);
- Arbeta med tredjepartstjänster (t.ex. Google Maps, Twitter API, betalningslösningar).
Vi interagerar med API:er genom att skicka HTTP-förfrågningar till ett API-endpoint, och servern svarar med data, vanligtvis i JSON-format.
Om du är ny på JSON eller vill få en djupare förståelse för hur det fungerar, läs artikeln Understanding and Working with JSON Data
Skicka HTTP-förfrågningar med fetch()
Funktionen fetch() är ett modernt sätt att göra nätverksförfrågningar i JavaScript. Den returnerar ett Promise, som löses när förfrågan är klar.
index.html
index.js
Detta exempel illustrerar hur man gör en HTTP GET-begäran till ett API med hjälp av fetch(). Funktionen fetchData skickar en begäran till den angivna slutpunkten (https://jsonplaceholder.typicode.com/posts/1). När svaret tas emot, tolkar response.json() JSON-datan. Inläggets titel extraheras sedan från den tolkade datan och visas i HTML-paragrafen.
Hantering av API-svar: Tolka JSON och kontrollera svarstatus
Efter att ha skickat en API-begäran är det viktigt att kontrollera om begäran lyckades och hantera svaret korrekt. I de flesta fall returneras data från ett API i JSON-format, så du behöver tolka det med response.json().
Dessutom bör du alltid kontrollera svarstatus för att säkerställa att begäran lyckades (statuskod 200–299).
index.html
index.js
Detta exempel visar hur man hanterar svarstatus från en API-förfrågan. Funktionen fetchAndCheckStatus skickar en förfrågan till en API-endpoint och kontrollerar sedan om svaret är lyckat med hjälp av response.ok, som returnerar true för statuskoder i intervallet 200–299. Om förfrågan lyckas tolkas och visas JSON-datan. Om förfrågan misslyckas visas felstatuskoden i HTML:en.
Felhantering med API:er och hantering av nätverksfel
Vid arbete med API:er är det avgörande att hantera potentiella fel såsom:
- Nätverksfel: Servern kan vara onåbar på grund av nätverksproblem;
- Ogiltiga svar: API:et kan returnera ett fel (t.ex. 404 Not Found eller 500 Server Error).
Du kan hantera fel genom att använda try...catch tillsammans med fetch() för att hantera både nätverksfel och API-svarsfel.
index.html
index.js
Detta exempel visar hur API-fel hanteras effektivt. Funktionen fetchWithErrorHandling använder try...catch för att hantera både nätverksfel och ogiltiga API-svar. Om begäran till den ogiltiga URL:en misslyckas, eller om svarskoden ligger utanför intervallet 200–299, kastas ett fel med ett specifikt meddelande. catch-blocket visar sedan felmeddelandet i HTML:en. Denna metod säkerställer att eventuella problem med API-anropet, såsom en felaktig slutpunkt eller anslutningsproblem, hanteras smidigt och kommuniceras tydligt till användaren.
1. Vad returnerar funktionen fetch()?
2. Vad är syftet med att använda try...catch med fetch()?
Tack för dina kommentarer!
