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 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 28 29 |
function fgvKuld() { const evszam = document.getElementById('ev').value; //console.log(testsuly,magassag); 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.