JavaScript: API használata

10.évf_js JavaScript

API-k (Application Programming Interface) olyan eszközök, amelyek lehetővé teszik különböző szoftverek és alkalmazások közötti kommunikációt. JavaScript-tel a leggyakrabban használt módszerek a XMLHttpRequest objektum, vagy a Fetch API használata.
Az adatok lekéréséhez a GET http metódust fogjuk használni. A http metódusok meghatározzák egy HTTP kérés célját és típusát. Eddig a GET és a POST metódust használtuk, de vannak még: (GET, POST, PUT, DELETE, TRACE, OPTIONS, CONNECT)

A Fetch API használata:

HTTP kérés küldése -> válasz feldolgozása

Válasz feldolgozása: a fetch egy promise-t ad vissza, amely tartalmazza a választ (Response objektumot).
A then metódust használva folytathatjuk a válasz feldolgozását.

Megszakítás és időkorlát: a fetch nem dob hibát nem sikeres státuszkódok esetén (pl. 404 vagy 500). A hibakezeléshez manuálisan kell ellenőrizni a státuszkódot (response.ok). A hálózati időkorlátok kezeléséhez használhatunk opcionális timeout-ot vagy a AbortController-t.

Példa: random kutyus

Nézzünk meg egy példát! A dog.ceo oldalról fogunk egy véletlen képet betölteni. Az api-t ezen az url címen érjük el: https://dog.ceo/api/breeds/image/random

Nézzük meg ugyanezt a Fetch api segítségével:

Feladat: Húsvét és pünkösd vasárnap dátuma, évszám megadásával

Készíts a megadott api-hoz űrlapot, amivel el tudod küldeni az évszámot!
A visszakapott JSON fájlból irasd ki az adatokat!
url: https://viktortaylor.eu/webprog/husvet.php

API hívás példa:
https://viktortaylor.eu/webprog/husvet.php/?evszam=2023

Minta az API hívás eredményére JSON formában:
{„ev”:”2023″,”husvet”:”április 9.”,”punkosd”:”május 28.”}

A JSON forma dekódolva – az olvashatóság érdekében:
stdClass Object
(
[evszam] => 2023
[husvet] => április 9.
[punkosd] => május 28.
)

Megoldás – Fecth api

Megoldás – XMLHttpRequest

HTTP metódusok

GET: egy erőforrás lekérdezésére szolgál. A kérés paramétereit az URL-ben vagy a fejlécekben lehet megadni.
POST: adatok küldésére szolgál egy erőforráshoz annak törzsében. A POST kérés általában adatok létrehozására vagy módosítására szolgál.
PUT: egy erőforrást cserél ki vagy hoz létre a törzsben lévő adatok alapján. Általában a teljes erőforrást kicseréli a megadott adatokra.
DELETE: egy erőforrást töröl. A kérés törzsében általában nincsenek adatok, mivel a törlési szándék az erőforrás azonosítójából vagy URL-jéből származik.
PATCH: az erőforrást módosítja vagy frissíti a törzsben lévő adatok alapján. A PATCH kérések gyakran csak a módosítani kívánt adatokat tartalmazzák.
OPTIONS: egy kérés küldésére szolgál, hogy megtudja, hogy az adott erőforrás milyen HTTP metódusokat támogat.
HEAD: az adott erőforrás HTTP fejléceit lekéri, de nem küldi el a törzset. Gyakran használják annak ellenőrzésére, hogy az erőforrás módosult-e.
TRACE: az erőforrás útvonalát megjeleníti, amit a kérés a szerveren bejár. Ez hasznos lehet hibakeresés során.