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:
|
1 2 3 4 5 6 7 8 |
let response = await fetch(url); if (response.ok) { // if HTTP-status is 200-299 // get the response body (the method explained below) let json = await response.json(); } else { alert("HTTP-Error: " + response.status); } |
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
|
1 2 3 4 5 6 |
fetch('https://dog.ceo/api/breeds/image/random'); // Alapértelmezett GET kérés // vagy fetch('https://dog.ceo/api/breeds/image/random', { method: 'POST', // POST kérés // további konfigurációs beállítások... }); |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
fetch('https://dog.ceo/api/breeds/image/random') .then(response => { // Válasz feldolgozása if (!response.ok) { throw new Error('Hiba!'); } return response.json(); // JSON válasz esetén }) .then(data => { // Feldolgozott adatok itt }) .catch(error => { // Hiba kezelése console.error('Fetch error:', error); }); |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
const controller = new AbortController(); const signal = controller.signal; setTimeout(() => controller.abort(), 5000); // 5 másodperces időkorlát fetch('https://dog.ceo/api/breeds/image/random', { signal }) .then(response => { if (!response.ok) { throw new Error('Network response was not ok'); } return response.json(); }) .then(data => { // Feldolgozott adatok itt }) .catch(error => { if (error.name === 'AbortError') { console.error('Request timed out'); } else { console.error('Fetch error:', error); } }); |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
<!DOCTYPE html> <html lang="hu"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Kutya nézegető</title> <style> img{max-width: 250px;} </style> </head> <body> <h1>Kutya nézegető</h1> <div id="pelda"> <button onclick="fgvRandomKutya()">Új kép</button><br> <img id="kepAz" alt="Random Dog Image"> </div> <script> function fgvRandomKutya() { // XMLHttpRequest objektum létrehozása var keres = new XMLHttpRequest(); // API végpont var apiVegPont = "https://dog.ceo/api/breeds/image/random"; // GET kérés küldése az API-hoz keres.open("GET", apiVegPont, true); // Kérés befejezésekor végrehajtandó függvény keres.onload = function () { // HTTP státus 200-as kód esetén feldolgozzuk a választ if (keres.status === 200) { // JSON válasz feldolgozása var valasz = JSON.parse(keres.responseText); // Kép URL kinyerése a válaszból var kepUrl = valasz.message; // Kép elem kiválasztása var kep = document.getElementById("kepAz"); // Kép URL beállítása kep.src = kepUrl; } else { // Hiba esetén kiírjuk a hibaüzenetet a konzolra console.error("Hiba a kép betöltése közben. Státus kód: " + keres.status); } }; // Kérés küldése keres.send(); } window.onload=fgvRandomKutya(); </script> </body> </html> |
Nézzük meg ugyanezt a Fetch api segítségével:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
function fgvRandomKutya() { // API végpont var apiVegPont = "https://dog.ceo/api/breeds/image/random"; // Fetch használata fetch(apiVegPont) .then(response => { // Ellenőrizzük a választ if (!response.ok) { throw new Error("Network response was not ok"); } // JSON válasz feldolgozása return response.json(); }) .then(data => { // Kép URL kinyerése a válaszból var kepUrl = data.message; // Kép elem kiválasztása var kep = document.getElementById("kepAz"); // Kép URL beállítása kep.src = kepUrl; }) .catch(error => { // Hiba esetén kiírjuk a hibaüzenetet a konzolra console.error("Hiba a kép betöltése közben:", error); }); } |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
function fgvKuld() { const evszam = document.getElementById('ev').value; if (isNaN(evszam)) { alert('Hiba! Évszámot adj meg!'); return; } const url = `https://viktortaylor.eu/webprog/husvet.php?evszam=${evszam}`; fetch(url) .then(response => { if (!response.ok) { throw new Error('Network response was not ok'); } return response.json(); }) .then(kapottAdatok => { // Adatok kiírása const eredmenyDiv = document.getElementById('eredmeny'); eredmenyDiv.innerHTML += `<p>Év: ${kapottAdatok.ev}</p>`; eredmenyDiv.innerHTML += `<p>Húsvét vasárnap: ${kapottAdatok.husvet}</p>`; eredmenyDiv.innerHTML += `<p>Pünkösd vasárnap: ${kapottAdatok.punkosd} </p>`; }) .catch(error => { console.error('Fetch error:', error); }); } |
Megoldás – XMLHttpRequest
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
<!DOCTYPE html> <html lang="hu"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Húsvét, Pünkösd</title> </head> <body> <h1>Húsvét, Pünkösd kalkulátor</h1> <form id="evszamform"> <label for="urlap">Év: </label> <input type="number" id="ev" name="ev" required> <br> <button type="button" onclick="fgvKuld()">Számold ki!</button> </form> <div> <h2>Eredmény:</h2> <div id="eredmeny"></div> </div> <script> function fgvKuld() { const evszam = document.getElementById('ev').value; if (isNaN(evszam)) { alert('Hiba! Évszámot adj meg!'); return; } const keres = new XMLHttpRequest(); const url = 'https://viktortaylor.eu/webprog/husvet.php'; keres.open('GET', `${url}?evszam=${evszam}`, true); keres.onreadystatechange = function () { if (keres.readyState == 4 && keres.status == 200) { // A válasz JSON objektummá alakítása const kapottAdatok = JSON.parse(keres.responseText); // A válasz kiírása a konzolon console.log(kapottAdatok); // Adatok kiírása const eredmenyDiv = document.getElementById('eredmeny'); eredmenyDiv.innerHTML += `<p>Év: ${kapottAdatok.ev}</p>`; eredmenyDiv.innerHTML += `<p>Húsvét vasárnap: ${kapottAdatok.husvet}</p>`; eredmenyDiv.innerHTML += `<p>Pünkösd vasárnap: ${kapottAdatok.punkosd} </p>`; } }; // Kérés elküldése keres.send(); } </script> </body> </html> |
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.