Ha webes alkalmazást ír, akkor valószínű, hogy külső adatokkal kell dolgoznia. Ez lehet a saját adatbázisa, harmadik fél API-jai stb.
Amikor az AJAX először megjelent 1999-ben, ez jobb módszert mutatott nekünk a webalkalmazások felépítésére. Az AJAX mérföldkő volt a webfejlesztésben, és számos modern technológia, például a React mögött álló koncepció.
Az AJAX előtt még egy egész weboldalt is vissza kellett renderelnie a kisebb frissítések érdekében is. De az AJAX lehetőséget adott arra, hogy lekérjük a tartalmat a háttérprogramból, és frissítsük a kiválasztott felhasználói felület elemeit. Ez segítette a fejlesztőket a felhasználói élmény javításában és nagyobb, bonyolultabb webplatformok felépítésében.
Összeomlási tanfolyam a REST API-kon
Most a RESTful API-k korában vagyunk. Egyszerűen fogalmazva: a REST API lehetővé teszi az adatok tárolását és húzását egy adattárolóból. Ez lehet az Ön adatbázisa vagy egy harmadik fél szervere, például a Twitter API.
Néhány különböző típusú REST API létezik. Nézzük meg azokat, amelyeket a legtöbb esetben használni fog.
- GET - Adatok beszerzése az API-tól. Például szerezzen be egy twitter felhasználót a felhasználóneve alapján.
- POST - Adatok továbbítása az API-ra. Például hozzon létre egy új felhasználói rekordot névvel, életkorral és e-mail címmel.
- PUT - Meglévő rekord frissítése új adatokkal. Frissítse például a felhasználó e-mail címét.
- DELETE - Rekord eltávolítása. Például töröljön egy felhasználót az adatbázisból.
Minden REST API-ban három elem található. A kérés, a válasz és a fejlécek.
Kérelem - Ez az az adat, amelyet elküld az API-nak, például egy megrendelés azonosítója a rendelés részleteinek lekéréséhez.
Válasz - Minden olyan adat, amelyet sikeres / sikertelen kérés után kap vissza a szerverről.
Fejlécek - Az API-nak továbbított további metaadatok segítenek a kiszolgálónak megérteni, hogy milyen típusú kéréssel foglalkozik, például „tartalomtípus”.
A REST API használatának igazi előnye, hogy egyetlen API réteget készíthet több alkalmazás számára, amelyekkel együtt dolgozhat.
Ha van olyan adatbázisa, amelyet webes, mobil és asztali alkalmazás segítségével kíván kezelni, akkor csak egyetlen REST API-rétegre van szüksége.
Most, hogy tudja, hogyan működnek a REST API-k, nézzük meg, hogyan használhatjuk fel őket.
XMLHttpRequest
Mielőtt a JSON átvette a világot, az adatcsere elsődleges formátuma az XML volt. Az XMLHttpRequest () egy JavaScript függvény, amely lehetővé tette az adatok lekérését az API-kból, amelyek XML-adatokat adtak vissza.
Az XMLHttpRequest lehetőséget adott arra, hogy az egész oldal újratöltése nélkül lehívjuk az XML adatokat a háttérprogramból.
Ez a függvény kezdettől kezdve csak XML volt. Most más adatformátumokat támogat, mint a JSON és a sima szöveg.
Írjunk egy egyszerű XMLHttpRequest hívást a GitHub API-ra a profilom beolvasásához.
// function to handle success function success() { var data = JSON.parse(this.responseText); //parse the string to JSON console.log(data); } // function to handle error function error(err) { console.log('Request Failed', err); //error details will be in the "err" object } var xhr = new XMLHttpRequest(); //invoke a new instance of the XMLHttpRequest xhr.onload = success; // call success function if request is successful xhr.onerror = error; // call error function if request failed xhr.open('GET', '//api.github.com/users/manishmshiva'); // open a GET request xhr.send(); // send the request to the server.A fenti kód GET-kérést küld a //api.github.com/users/manishmshiva címre a GitHub-információk lekérésére a JSON-ban. Ha a válasz sikeres volt, a következő JSON-t nyomtatja ki a konzolra:
Ha a kérés nem sikerült, akkor ezt a hibaüzenetet kinyomtatja a konzolra:
Fetch API
A Fetch API az XMLHttpRequest egyszerűbb, könnyen használható verziója az erőforrások aszinkron felhasználására. A Fetch lehetővé teszi a REST API-k használatát további lehetőségekkel, például az adatok gyorsítótárazásával, a streaming válaszok olvasásával és egyebekkel.
A fő különbség az, hogy a Fetch ígéretekkel dolgozik, nem pedig visszahívásokkal. A JavaScript fejlesztői az ígéretek bevezetése után eltávolodtak a visszahívásoktól.
Bonyolult alkalmazások esetén könnyen megszokhatja a visszahívások írását, amelyek visszahívási pokolhoz vezetnek.
Ígéretekkel könnyen lehet aszinkron kéréseket írni és kezelni. Ha még nem ismeri az ígéreteket, itt megtudhatja, hogyan működnek.
Így néz ki a korábban írt függvény, ha az XMLHttpRequest helyett a fetch () parancsot használja:
// GET Request. fetch('//api.github.com/users/manishmshiva') // Handle success .then(response => response.json()) // convert to json .then(json => console.log(json)) //print data to console .catch(err => console.log('Request Failed', err)); // Catch errorsA Fetch függvény első paraméterének mindig az URL-nek kell lennie. Ezután a Fetch elvesz egy második JSON objektumot olyan opciókkal, mint a method, a fejlécek, a kérelem törzse stb.
Fontos különbség van az XMLHttpRequest és a Fetch válaszobjektuma között.
Az XMLHttpRequest az adatokat válaszként adja vissza, míg a Fetch válaszobjektuma információkat tartalmaz magáról a válaszobjektumról. Ide tartoznak a fejlécek, az állapotkód stb.
Egy másik fontos különbség az, hogy a Fetch API nem dob hibát, ha a kérelem 400 vagy 500 állapotkódot ad vissza. Ezt továbbra is sikeres válaszként jelöljük meg, és átadjuk az „akkor” funkciónak.
A Fetch csak akkor dob hibát, ha maga a kérés megszakad. 400 és 500 válasz kezeléséhez egyéni logikát írhat a 'response.status' használatával. A 'status' tulajdonság megadja a visszaküldött válasz állapotkódját.
Nagy. Most, hogy megértette a Fetch API működését, nézzünk meg még néhány példát, például az adatok továbbítását és a fejlécekkel való munkát.
Munka a fejlécekkel
A fejléceket átadhatja a „fejlécek” tulajdonság használatával. A fejléc-konstruktort is használhatja a kód jobb strukturálásához. De a JSON objektum átadása a „fejlécek” tulajdonságnak a legtöbb esetben működik.
fetch('//api.github.com/users/manishmshiva', { method: "GET", headers: {"Content-type": "application/json;charset=UTF-8"} }) .then(response => response.json()) .then(json => console.log(json)); .catch(err => console.log(err));Adatok továbbítása POST-kérelemhez
POST kéréshez használhatja a „body” tulajdonságot egy JSON karakterlánc átadásához bemenetként. Ne feledje, hogy a kérelem törzsének JSON karakterláncnak kell lennie, míg a fejléceknek JSON objektumnak.
// data to be sent to the POST request let _data = { title: "foo", body: "bar", userId:1 } fetch('//jsonplaceholder.typicode.com/posts', { method: "POST", body: JSON.stringify(_data), headers: {"Content-type": "application/json; charset=UTF-8"} }) .then(response => response.json()) .then(json => console.log(json)); .catch(err => console.log(err));A Fetch API továbbra is aktív fejlesztés alatt áll. Jobb tulajdonságokra számíthatunk a közeljövőben.
A legtöbb böngésző azonban támogatja a Fetch használatát az alkalmazásokban. Az alábbi diagram segít megtudni, mely böngészők támogatják az internetes és mobilalkalmazásokban.
Remélem, hogy ez a cikk segített megérteni, hogyan kell működni a Fetch API-val. Ne felejtse el kipróbálni a Fetch alkalmazást a következő webalkalmazásához.
Rendszeresen írok a gépi tanulásról, a kiberbiztonságról és a DevOps-ról. Itt regisztrálhat a heti hírlevelemre .