JavaScript: API használata

10.évf_js JavaScript

Az 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 Fetch api, illetve az XMLHttpRequest objektum.
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

A Fetch API-val a kérést a fetch() függvény meghívásával lehet végrehajtani. Át kell adni neki egy Request objektumot vagy egy karakterláncot, amely a lekérdezni kívánt URL-t tartalmazza, valamint opcionális paramétert a kérés konfigurálására.
A fetch() függvény egy Promise-t ad vissza, amely egy Response objektummal teljesül, amely a szerver válaszát képviseli. Ezután ellenőrizhetjük a kérés állapotát és feldolgozhatjuk a választ különböző formátumokban. (szövegként, JSON-t stb.)

CORS (Cross-Origin Resource Sharing):
A CORS egy biztonsági funkció, amely lehetővé teszi, hogy egy weboldal másik domainen lévő erőforrásokat kérjen le. Alapértelmezés szerint a böngészők megakadályozzák a cross-origin kéréseket, de a CORS beállítások segítségével megadható, hogy bizonyos kérések engedélyezve legyenek. A szerver válaszában szereplő Access-Control-Allow-Origin fejléc segítségével engedélyezhetjük a cross-origin kéréseket.

Amikor a Fetch API-t használjuk egy HTTP-kérés elküldésére, a válaszból az adatokat különböző formátumokban olvashatjuk ki, a válasz (Response) objektum különböző metódusain keresztül. Ezek mind ígéret (Promise) alapú metódusok, ami azt jelenti, hogy aszinkron módon kezelik az adatokat, és a használatukhoz a .then() vagy az async/await szintaxis szükséges.

Fetch általános szintakszisa:

Paraméterek:

URL: az a cím, ahová a kérést küldjük
Options: Opcionális paraméterek:

  • Method: http metódus (GET, POST, PUT, DELETE)
  • Headers (fejléc)
  • Body: Adatok, amelyeket a kéréssel külüdünk
  • Mode: Kérés módja (cors, nocors, same-origin, stb.)
    cors: Alapértelmezett, lehetővé teszi a CORS kérelmeket.
    same-origin: A kérést csak ugyanazon a domainen teszi lehetővé.
    no-cors: Másik domaintől kérhetünk le adatot, de nem férhetünk hozzá a válasz tartalmához.
  • Credentials (hietelesítés): Meghatározza, hogy küldjön-e felhasználói hitelesítő adatokat (cookie-kat, hitelesítési fejléceket stb.) a kéréssel
    omit: Nem küld sütiket vagy hitelesítési adatokat (alapértelmezett)
    same-origin: Csak az azonos domainre küld hitelesítési adatokat
    include: Mindig küld sütiket és hitelesítési adatokat.

Metódusok a response feldolgozásához:

response.text(): egyszerű szövegként adja vissza a választ

response.json(): JSON formátumban olvassa ki a választ, és automatikusan parse-olja JavaScript objektummá

response.formData(): a választ formData objektumként adja vissza

response.blob(): bináris adatként olvassa ki a választ, egy Blob objektummá alakítva. A Blob egy bináris adatok tárolására szolgáló objektum, amit például fájlok, képek vagy más típusú bináris adatok letöltéséhez használhatunk

response.arrayBuffer(): ArrayBuffer-t ad vissza, amely alacsony szintű bináris adatokat tartalmaz. Például ha byte-onként kell adatokat feldolgozni

response.body: egy ReadableStream objektumot ad vissza, amely lehetővé teszi az adatfolyam darabonkénti olvasását (chunk-by-chunk). Ezt akkor használják, ha a választ részletekben szeretnénk olvasni, például amikor nagyon nagy adatokat kell letölteni és feldolgozni anélkül, hogy egyszerre kellene az egészet betölteni a memóriába.

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.