fetch()

A fetch egy modern API az aszinkron hálózati kérésekhez a böngészőkben. Segítségével HTTP kéréseket lehet küldeni és válaszokat lehet fogadni.

Url beállítása, beállíthatjuk a header infókat. A fetch első paramétere a célszerver URL-je. A második paraméter egy opcionális beállításokat tartalmazó objektum, például a kérést beállító fejlécek.

fetch(url, {

    headers: {

        "Accept": "application/json"

    }

})

A fetch aszinkron függvény, tehát a hívás után a kód folytatódik anélkül, hogy megvárná a választ. A then metódusok segítségével a választ feldolgozhatjuk. Az első then a HTTP választ adja vissza, a második pedig a választ feldolgozza.

fetch(url, { headers: { "Accept": "application/json" } })

    .then(response => response.json())

    .then(data => console.log(data))

    .catch(error => console.error('Hiba történt:', error));

Mivel az API-k gyakran JSON formátumban küldik a választ, a json metódust használhatjuk a válasz JSON parse-olásához.

Az első then után az response.json() hívással a választ JSON formátumban konvertálja, és a második then blokkban már a JSON objektummal dolgozhatunk.

.then(response => response.json())

.then(data => console.log(data))

A hibák kezelésére a catch metódust használhatjuk. Ez elkapja az összes hibát, amely a láncban bármelyik ponton történhet.

.catch(error => console.error('Hiba történt:', error));

Feladat:

Olvass be vicceket a következő két URL-ből:

https://icanhazdadjoke.com/

https://api.chucknorris.io/jokes/random

Generálj egy random számot, ami ha 50-nél nagyobb akkor a DadJoke-ról válasszon egy viccet, ha kisebb a Chuck Norris viccek közül dobjon egyet.