Summary  
This chapter covers using the JavaScript fetch function to interact with APIs by sending HTTP requests, parsing JSON responses, checking response status codes, and handling errors with try…catch.

General domain of usage  
Web applications

## Mikä on API ja miten sen kanssa vuorovaikutetaan?

**API** (Application Programming Interface) on joukko sääntöjä ja protokollia, jotka mahdollistavat eri ohjelmistosovellusten välisen kommunikoinnin.

Määritelmä

Verkkokehityksessä API:t mahdollistavat JavaScript-koodin vuorovaikutuksen ulkoisten palveluiden kanssa, kuten tiedon hakemisen palvelimelta, lomaketietojen lähettämisen tai kolmannen osapuolen palveluiden integroinnin.

Nykyaikaisissa JavaScript-sovelluksissa API:ita käytetään usein:
- Tietojen hakemiseen palvelimelta (esim. säätiedot, uutisartikkelit tai tuotetiedot);
- Tietojen lähettämiseen palvelimelle (esim. lomakkeen lähettäminen tai käyttäjäasetusten tallentaminen);
- Kolmannen osapuolen palveluiden kanssa työskentelyyn (esim. Google Maps, Twitter API, maksupalvelut).

API:iden kanssa vuorovaikutetaan lähettämällä **HTTP-pyyntöjä** API-päätepisteeseen, ja palvelin vastaa tiedoilla, jotka ovat tyypillisesti **JSON**-muodossa.

Jos JSON on sinulle uusi tai haluat syvällisemmän ymmärryksen sen toiminnasta, tutustu artikkeliin <a href="https://codefinity.com/blog/Understanding-and-Working-with-JSON-Data" target="_blank"><svg width="1em" height="1em" viewBox="0 0 30 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke="#098f67" style="stroke: var(--color1, #098f67)" stroke-linejoin="miter" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.4156" d="M17.289 17.305v0c-1.754 1.754-4.597 1.754-6.351 0l-7.76-7.759c-1.755-1.755-1.755-4.601 0-6.356v0c1.753-1.753 4.595-1.756 6.351-0.005l6.208 6.187"></path><path fill="none" stroke="#098f67" style="stroke: var(--color1, #098f67)" stroke-linejoin="miter" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.4156" d="M12.504 13.97v0c1.754-1.754 4.597-1.754 6.351 0l7.762 7.762c1.754 1.754 1.754 4.597 0 6.351v0c-1.754 1.754-4.597 1.754-6.351 0l-5.953-5.953"></path></svg> Understanding and Working with JSON Data</a>

Lisätietoa

## HTTP-pyyntöjen lähettäminen fetch()-funktiolla
`fetch()`-funktio on moderni tapa tehdä verkkopyyntöjä JavaScriptissä. Se palauttaa Promisen, joka täyttyy, kun pyyntö valmistuu.

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBocmVmPSJpbmRleC5jc3MiIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGgyPkFQSSBSZXF1ZXN0IEV4YW1wbGU8L2gyPgogICAgPHAgaWQ9ImFwaS1vdXRwdXQiPkxvYWRpbmcgZGF0YS4uLjwvcD4KICAgIDxzY3JpcHQgc3JjPSJpbmRleC5qcyI+PC9zY3JpcHQ+CiAgPC9ib2R5Pgo8L2h0bWw+

YXN5bmMgZnVuY3Rpb24gZmV0Y2hEYXRhKCkgewogIGNvbnN0IHJlc3BvbnNlID0gYXdhaXQgZmV0Y2goJ2h0dHBzOi8vanNvbnBsYWNlaG9sZGVyLnR5cGljb2RlLmNvbS9wb3N0cy8xJyk7CiAgY29uc3QgZGF0YSA9IGF3YWl0IHJlc3BvbnNlLmpzb24oKTsgLy8gUGFyc2UgSlNPTiBmcm9tIHRoZSByZXNwb25zZQoKICBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnYXBpLW91dHB1dCcpLnRleHRDb250ZW50ID0gYFRpdGxlOiAke2RhdGEudGl0bGV9YDsKfQoKZmV0Y2hEYXRhKCk7

Tämä esimerkki havainnollistaa HTTP GET -pyynnön tekemistä API:lle käyttäen `fetch()`-funktiota. `fetchData`-funktio lähettää pyynnön määritettyyn päätepisteeseen (`https://jsonplaceholder.typicode.com/posts/1`). Kun vastaus on vastaanotettu, `response.json()` jäsentää JSON-datan. Tämän jälkeen viestin otsikko poimitaan jäsennetystä datasta ja näytetään HTML-kappaleessa.

## API-vastausten käsittely: JSON:n jäsentäminen ja vastaustilan tarkistaminen
API-pyynnön lähettämisen jälkeen on tärkeää tarkistaa, onnistuiko pyyntö ja käsitellä vastaus asianmukaisesti. Useimmissa tapauksissa API palauttaa datan **JSON**-muodossa, joten se täytyy jäsentää käyttämällä `response.json()`.

Lisäksi tulee aina tarkistaa **vastaustila** varmistaakseen, että pyyntö onnistui (tilakoodi 200–299).

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBocmVmPSJpbmRleC5jc3MiIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGgyPkFQSSBSZXNwb25zZSBTdGF0dXMgRXhhbXBsZTwvaDI+CiAgICA8cCBpZD0ic3RhdHVzLW91dHB1dCI+Q2hlY2tpbmcgcmVzcG9uc2Ugc3RhdHVzLi4uPC9wPgogICAgPHNjcmlwdCBzcmM9ImluZGV4LmpzIj48L3NjcmlwdD4KICA8L2JvZHk+CjwvaHRtbD4=

YXN5bmMgZnVuY3Rpb24gZmV0Y2hBbmRDaGVja1N0YXR1cygpIHsKICBjb25zdCByZXNwb25zZSA9IGF3YWl0IGZldGNoKCdodHRwczovL2pzb25wbGFjZWhvbGRlci50eXBpY29kZS5jb20vcG9zdHMvMScpOwoKICBpZiAocmVzcG9uc2Uub2spIHsKICAgIC8vIENoZWNrIGlmIHRoZSBzdGF0dXMgaXMgT0sgKHN0YXR1cyBjb2RlIDIwMCAtIDI5OSkKICAgIGNvbnN0IGRhdGEgPSBhd2FpdCByZXNwb25zZS5qc29uKCk7CiAgICBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgKICAgICAgJ3N0YXR1cy1vdXRwdXQnCiAgICApLnRleHRDb250ZW50ID0gYFBvc3QgVGl0bGU6ICR7ZGF0YS50aXRsZX1gOwogIH0gZWxzZSB7CiAgICBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgKICAgICAgJ3N0YXR1cy1vdXRwdXQnCiAgICApLnRleHRDb250ZW50ID0gYEVycm9yOiAke3Jlc3BvbnNlLnN0YXR1c31gOwogIH0KfQoKZmV0Y2hBbmRDaGVja1N0YXR1cygpOw==

Tämä esimerkki havainnollistaa API-pyynnön vasteen tilan käsittelyä. Funktio `fetchAndCheckStatus` lähettää pyynnön API-päätepisteeseen ja tarkistaa sitten, onko vastaus onnistunut käyttämällä `response.ok`, joka palauttaa arvon `true` tilakoodeille välillä 200–299. Jos pyyntö onnistuu, JSON-data jäsennetään ja näytetään. Jos pyyntö epäonnistuu, virheen tilakoodi näytetään HTML:ssä.

## Virheenkäsittely API-yhteyksissä ja verkko-ongelmien hallinta
Kun työskentelet API-rajapintojen kanssa, on tärkeää käsitellä mahdolliset virheet, kuten:
- Verkko-ongelmat: Palvelimeen ei ehkä saada yhteyttä verkko-ongelmien vuoksi;
- Virheelliset vastaukset: API voi palauttaa virheen (esim. 404 Not Found tai 500 Server Error).

Voit käsitellä virheitä käyttämällä `try...catch`-rakennetta yhdessä `fetch()`-funktion kanssa hallitaksesi sekä verkko- että API-vastausvirheet.

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBocmVmPSJpbmRleC5jc3MiIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGgyPkFQSSBFcnJvciBIYW5kbGluZyBFeGFtcGxlPC9oMj4KICAgIDxwIGlkPSJlcnJvci1vdXRwdXQiPkxvYWRpbmcgZGF0YS4uLjwvcD4KICAgIDxzY3JpcHQgc3JjPSJpbmRleC5qcyI+PC9zY3JpcHQ+CiAgPC9ib2R5Pgo8L2h0bWw+

YXN5bmMgZnVuY3Rpb24gZmV0Y2hXaXRoRXJyb3JIYW5kbGluZygpIHsKICB0cnkgewogICAgY29uc3QgcmVzcG9uc2UgPSBhd2FpdCBmZXRjaCgKICAgICAgJ2h0dHBzOi8vanNvbnBsYWNlaG9sZGVyLnR5cGljb2RlLmNvbS9pbnZhbGlkLWVuZHBvaW50JwogICAgKTsgLy8gSW52YWxpZCBVUkwKCiAgICBpZiAoIXJlc3BvbnNlLm9rKSB7CiAgICAgIHRocm93IG5ldyBFcnJvcihgSFRUUCBlcnJvciEgU3RhdHVzOiAke3Jlc3BvbnNlLnN0YXR1c31gKTsKICAgIH0KCiAgICBjb25zdCBkYXRhID0gYXdhaXQgcmVzcG9uc2UuanNvbigpOwogICAgZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2Vycm9yLW91dHB1dCcpLnRleHRDb250ZW50ID0gYERhdGE6ICR7ZGF0YS50aXRsZX1gOwogIH0gY2F0Y2ggKGVycm9yKSB7CiAgICBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgKICAgICAgJ2Vycm9yLW91dHB1dCcKICAgICkudGV4dENvbnRlbnQgPSBgRXJyb3I6ICR7ZXJyb3IubWVzc2FnZX1gOwogIH0KfQoKZmV0Y2hXaXRoRXJyb3JIYW5kbGluZygpOw==

Tämä esimerkki havainnollistaa, kuinka API-virheet käsitellään tehokkaasti. `fetchWithErrorHandling`-funktio käyttää `try...catch`-rakennetta hallitakseen sekä verkkovirheitä että virheellisiä API-vastauksia. Jos pyyntö virheelliseen URL-osoitteeseen epäonnistuu tai jos vastauskoodi ei ole välillä 200–299, heitetään virhe tietyllä viestillä. `catch`-lohko näyttää virheilmoituksen HTML:ssä. Tämä menetelmä varmistaa, että kaikki API-kutsun ongelmat, kuten virheellinen päätepiste tai yhteysongelmat, käsitellään hallitusti ja viestitään selkeästi käyttäjälle.

Mikä on `try...catch`-rakenteen tarkoitus `fetch()`-funktion kanssa?

Hallitse keskeiset JavaScript-konseptit, kuten luokat, DOM-manipulointi, tapahtumien käsittely ja asynkroninen ohjelmointi. Opiskele dynaamisten ja interaktiivisten verkkosovellusten luomista hallitsemalla käyttäjän vuorovaikutuksia, tietojen hakua ja näyttämistä sekä asynkronisten toimintojen tehokasta käsittelyä. Kurssi yhdistää teoriaa, käytännön haasteita ja tosielämän esimerkkejä, tarjoten käytännön taidot moderniin web-kehitykseen.

Opi JavaScript-luokkien perusteet, luokkien määrittelystä toimintaa laajentavien metodien luomiseen. Tutustu parametriesineiden tehokkaaseen käyttöön, yksityisten ominaisuuksien hallintaan sekä pääsyn rajoittamiseen gettereillä ja settereillä. Hallitse staattiset ominaisuudet ja staattiset metodit sekä hyödynnä luokkaperintää "extends"- ja "super()"-avainsanoilla skaalautuvan ja uudelleenkäytettävän koodin rakentamiseksi.

Hallitse DOM-manipulointi dynaamisten ja interaktiivisten web-sovellusten luomiseksi. Selaa ja muokkaa DOM:n rakennetta, päivitä sisältöä dynaamisesti sekä toteuta parhaat käytännöt turvallisuuden ja suorituskyvyn varmistamiseksi. Erota ominaisuudet ja attribuutit koodin optimointia varten.

Avaa verkkosovellustesi vuorovaikutteisuus hallitsemalla JavaScript-tapahtumat. Ymmärrä tapahtumien eteneminen, hallitse tapahtumien käyttäytymistä ja toteuta tehokas tapahtumien käsittely käyttäjävuorovaikutuksia varten. Optimoi suorituskyky edistyneillä tekniikoilla, kuten tapahtumien delegoinnilla.

Syvenny asynkroniseen JavaScriptiin, mukaan lukien callbackit, Promiset ja async/await. Opi hakemaan dataa API-rajapinnoista, integroimaan kolmannen osapuolen kirjastoja sekä käsittelemään useita pyyntöjä tehokkaasti, kehittäen taitoja datavetoisten sovellusten rakentamiseen.

API:en Hakeminen ja Käsittely JavaScriptissä

API:en Hakeminen ja Käsittely JavaScriptissä