Teljes útmutató az Axiók használatához

Az Axios egy JavaScript-könyvtár, amely egyszerű API-t biztosít HTTP-kérések kliensoldali JavaScript-kódból vagy szerveroldali Node.js kódból történő küldéséhez. Az Axios a JavaScript Promise API-jára épül, amely karbantarthatóbbá teszi az aszinkron kódot.

Az Axios használatának első lépései

Használhatja az Axios alkalmazást egy Content Delivery Network (CDN) segítségével, vagy telepítheti a projektbe.

Az Axios közvetlen HTML-ben való használatához másolja ki az alábbi CDN hivatkozást, és illessze be a HTML-fájl fejrészébe:

<forgatókönyvsrc=" https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js">forgatókönyv>

Ezzel a megközelítéssel használhatja az Axiost és annak HTTP metódusok a HTML-szkriptek törzsében. Az Axiók is képesek REST API-kat használ egy olyan keretrendszerben, mint a React.

Az Axios Node.js projektben való használatához telepítse azt a projektkönyvtárba az npm vagy a yarn csomagkezelő használatával:

npm install axios
# vagy
fonal add axios

A telepítés után megkezdheti az Axios használatát JavaScript-projektjében:

const axiók = igényelnek("axiók");

Ezzel az útmutatóval együtt fog dolgozni az ingyenes JSONPlaceholder API. Bár ennek az API-nak vannak erőforrásai, Ön csak a /comments és /posts végpontok. A végpontok olyan konkrét URL-ek, amelyekhez hozzá lehet férni adatok lekéréséhez vagy manipulálásához.

GET kérések készítése Axios segítségével

Az Axios használatával többféleképpen is készíthet GET kérést. A szintaxis azonban általában a preferenciáktól függ.

A GET-kérés egyik módja a axios() metódus egy olyan objektummal, amely a kérési metódust mint kap és a kérés elküldésének URL-címe.

Például:

const axiók = igényelnek("axiók");
axios({
 módszer: "kap",
 url: " https://jsonplaceholder.typicode.com/comments",
})
 .akkor((res) => {
konzol.log (res.data);
 })
 .fogás((téved) => {
konzol.error (err);
 });

Ez a példa létrehozza az aszinkron programozási modellt használó ígéret láncolásával a .akkor() és .fogás() mód. Az ígéret naplózza a választ a konzolra, ha a kérés sikeres, és naplózza a hibaüzenetet, ha a kérés sikertelen.

Az Axios egy egyszerűbb módot is kínál a GET kérések lebonyolítására, amelyek kiküszöbölik az objektumok láncolásával történő átadását .kap() módszer a axiók példa.

Például:

axiók
 .kap(" https://jsonplaceholder.typicode.com/comments")
 .akkor((res) => {
konzol.log (res.data);
 })
 .fogás((téved) => {
konzol.error (err);
 });

POST kérések készítése Axios segítségével

A POST-kérés az Axios segítségével hasonló a GET-kéréshez. Ezzel a kéréssel adatokat küldhet egy szervernek.

Az alábbi kódrészlet egy példa az Axios használatára .post() módszer:

axiók
 .post(" https://jsonplaceholder.typicode.com/comments", {
 név: "Jackson Smith",
 email: "[email protected]",
 test: – Ez egy műalkotás.,
 })
 .akkor((res) => {
konzol.log (res.data);
 })
 .fogás((téved) => {
konzol.error (err);
 });

A kód POST kérést küld a JSONPlaceholder API-nak új megjegyzés létrehozásához. A axios.post metódus adatokat küld a /comments végpont.

A kérésben küldött adat egy objektum a név, email, és test ingatlan. Ha a kérés sikeres, a akkor metódus naplózza a válaszadatokat a konzolon. És ha hiba van, a fogás metódus naplózza a hibát a konzolon.

PUT/PATCH kérések készítése Axios segítségével

A PUT vagy PATCH kéréssel frissítheti a kiszolgálón meglévő erőforrásokat. Míg a PUT a teljes erőforrást lecseréli, a PATCH csak a megadott mezőket frissíti.

Ha PUT vagy PATCH kérést szeretne végrehajtani az Axios segítségével, használja a .put() vagy .tapasz() módszereket.

Íme egy példa arra, hogyan használhatja ezeket a módszereket a email a megjegyzés tulajdonsága 100-as azonosítóval:

const axiók = igényelnek("axiók");
axiók
 .kap(" https://jsonplaceholder.typicode.com/comments/100")
 .akkor((res) => {
konzol.log (res.data.email);
 })
 .fogás((téved) => {
konzol.error (err);
 });
// Kimenet:
// '[email protected]'
axiók
 .tapasz(" https://jsonplaceholder.typicode.com/comments/100", {
 email: "[email protected]",
 })
 .akkor((res) => {
konzol.log (res.data.email);
 })
 .fogás((téved) => {
konzol.error (err);
 });
// Kimenet:
// '[email protected]',

Ez a program először egy GET kérést küld a végponthoz " https://jsonplaceholder.typicode.com/comments/100". Ezután naplózza a email azonosítójával rendelkező megjegyzés tulajdonsága 100 a konzolhoz. GET kérelmet készítünk, hogy lássa, mi változott a PATCH kérés után.

A második kérés egy PATCH kérés ugyanahhoz a végponthoz. Ez a kód frissíti a megjegyzés e-mail-címét [email protected].

DELETE kérések készítése Axios segítségével

Használhatja a TÖRÖL kérje egy erőforrás törlését a kiszolgálón.

Vegyük a következő példát a használatára .töröl() módszer az erőforrás törlésére a szerverről:

axiók
 .töröl(" https://jsonplaceholder.typicode.com/comments/10")
 .akkor((res) => {
konzol.log (res.data);
 })
 .fogás((téved) => {
konzol.error (err);
 });
//Output:
// {}

Egy üres objektum naplózásával a konzolon a fenti kód azt mutatja, hogy törölte a 10-es azonosítójú megjegyzést.

Egyidejű kérések az Axiosokkal

Az Axios használatával egyszerre több végpontról is lekérhet adatokat. Ehhez használnia kell a .minden() módszer. Ez a metódus kérések tömbjét fogadja el paramétereként, és csak akkor oldja meg a megoldást, ha az összes választ megkapja.

A következő példában a .minden() metódus egyszerre két végpontról kér le adatokat:

axiók
 .minden([
 axios.get(" https://jsonplaceholder.typicode.com/comments? _limit=2"),
 axios.get(" https://jsonplaceholder.typicode.com/posts? _limit=2"),
 ])
 .akkor(
 axios.spread((hozzászólások, hozzászólások) => {
konzol.log (comments.data);
konzol.log (posts.data);
 })
 )
 .fogás((téved) =>konzol.error (err));

A fenti kódblokk egyidejűleg küldi el a kéréseket, majd továbbítja a válaszokat a .akkor() módszer. Axiós .terjedés() metódus elválasztja a válaszokat, és minden választ hozzárendel a változójához.

Végül a konzol naplózza a adat a két válasz tulajdonsága: a megjegyzések és a bejegyzések.

Kérések elfogása Axios segítségével

Néha előfordulhat, hogy le kell fognia egy kérést, mielőtt az eljutna a szerverhez. Használhatja az Axiost interceptors.request.use() kérések elfogásának módszere.

A következő példában a metódus minden végrehajtott kérés esetén naplózza a kérés típusát a konzolon:

axios.interceptors.request.use(
 (config) => {
konzol.log(`${config.method} kérelmet nyújtottak be.");
Visszatérés config;
 },
 (hiba) => {
VisszatérésÍgéret.reject (hiba);
 }
);
axiók
 .kap(" https://jsonplaceholder.typicode.com/comments? _limit=2")
 .akkor((res) =>konzol.log (res.data))
 .fogás((téved) =>konzol.error (err));

A program a segítségével definiál egy Axios elfogót axios.interceptors.request.use módszer. Ez a módszer úgy config és hiba objektumok érvként. A config Az objektum információkat tartalmaz a kérésről, beleértve a kérés metódusát (config.method) és a kérés URL-je (config.url).

Az elfogó függvény visszaadja a config objektumot, lehetővé téve a kérés normális folytatását. Hiba esetén a függvény az elutasított értéket adja vissza Ígéret tárgy.

Végül a program kéri az elfogó tesztelését. A konzol naplózza a kérés típusát, ebben az esetben a GET kérést.

Az Axiosban több is van

Megtanulta, hogyan lehet kéréseket kezdeményezni és elfogni projektjei során az Axios használatával. Sok más szolgáltatás, például a kérések átalakítása és az Axios-példányok használata elérhető JavaScript-fejlesztőként. Az Axios továbbra is előnyben részesített opció a HTTP-kérésekhez a JavaScript-alkalmazásokban. A Fetch API azonban egy másik jó lehetőség, amelyet felfedezhet.