Kompletný sprievodca prácou s Axios

Axios je knižnica JavaScript, ktorá poskytuje jednoduché rozhranie API na odosielanie požiadaviek HTTP z kódu JavaScript na strane klienta alebo kódu Node.js na strane servera. Axios je postavený na JavaScript Promise API, vďaka čomu je asynchrónny kód ľahšie udržiavateľný.

Začíname s Axios

Axios môžete použiť vo svojej aplikácii pomocou siete na doručovanie obsahu (CDN) alebo ho nainštalovať do svojho projektu.

Ak chcete použiť Axios priamo v HTML, skopírujte nižšie uvedený odkaz CDN a vložte ho do hlavičky vášho súboru HTML:

<skriptsrc=" https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js">skript>

S týmto prístupom môžete použiť Axios a jeho HTTP metódy v tele vašich HTML skriptov. Axios môže tiež spotrebúvajú REST API v rámci ako React.

Ak chcete použiť Axios v projekte Node.js, nainštalujte ho do adresára projektu pomocou správcu balíkov npm alebo yarn:

npm nainštalujte axios
# alebo
priadza pridať axios

Po inštalácii môžete začať používať Axios vo svojom projekte JavaScript:

konšt axios = vyžadovať("axios");

Podľa tohto návodu budete pracovať s bezplatnými JSONPlaceholder API. Aj keď má toto rozhranie API sadu zdrojov, budete využívať iba tieto /comments a /posts koncové body. Koncové body sú špecifické adresy URL, ku ktorým je možné pristupovať za účelom získania údajov alebo manipulácie s nimi.

Vytváranie žiadostí GET s Axios

Existuje niekoľko spôsobov, ako vytvoriť požiadavku GET pomocou Axios. Syntax však vo všeobecnosti závisí od preferencie.

Jedným zo spôsobov, ako zadať požiadavku GET, je použitie axios() metóda s objektom, ktorý špecifikuje metódu požiadavky ako dostať a adresu URL, na ktorú sa má žiadosť odoslať.

Napríklad:

konšt axios = vyžadovať("axios");
axios({
 metóda: "dostať",
 url: " https://jsonplaceholder.typicode.com/comments",
})
 .potom((res) => {
konzoly.log (res.data);
 })
 .catch((chybovať) => {
konzoly.chyba (chyba);
 });

Tento príklad vytvára prísľub využívajúci model asynchrónneho programovania reťazením .potom() a .catch() metódy. Sľub zaprotokoluje odpoveď do konzoly, keď je požiadavka úspešná, a zaznamená chybovú správu, ak požiadavka zlyhá.

Axios tiež poskytuje jednoduchší spôsob vytvárania požiadaviek GET, ktoré eliminujú potrebu odovzdať objekt reťazením .get() metóda k axios príklad.

Napríklad:

axios
 .get(" https://jsonplaceholder.typicode.com/comments")
 .potom((res) => {
konzoly.log (res.data);
 })
 .catch((chybovať) => {
konzoly.chyba (chyba);
 });

Vytváranie žiadostí POST s Axios

Zadanie požiadavky POST pomocou Axios je podobné ako zadanie požiadavky GET. Pomocou tejto požiadavky môžete odoslať údaje na server.

Nižšie uvedený útržok kódu je príkladom toho, ako používať Axios' .post() metóda:

axios
 .post(" https://jsonplaceholder.typicode.com/comments", {
 názov: "Jackson Smith",
 email: "[email protected]",
 telo: "Toto je umelecké dielo.",
 })
 .potom((res) => {
konzoly.log (res.data);
 })
 .catch((chybovať) => {
konzoly.chyba (chyba);
 });

Kód odošle požiadavku POST do JSONPlaceholder API na vytvorenie nového komentára. The axios.post metóda odosiela údaje do /comments koncový bod.

Údaje odoslané v žiadosti sú objektom s a názov, email, a telo nehnuteľnosť. Ak je žiadosť úspešná, potom metóda zaznamená údaje odpovede do konzoly. A ak sa vyskytne chyba, chytiť metóda zaznamená chybu do konzoly.

Vytváranie požiadaviek PUT/PATCH s Axios

Požiadavku PUT alebo PATCH môžete použiť na aktualizáciu existujúceho prostriedku na serveri. Zatiaľ čo PUT nahrádza celý zdroj, PATCH aktualizuje iba zadané polia.

Ak chcete vytvoriť požiadavku PUT alebo PATCH s Axios, musíte použiť .put() alebo .patch() metódy resp.

Tu je príklad použitia týchto metód na aktualizáciu email vlastnosť komentára s ID 100:

konšt axios = vyžadovať("axios");
axios
 .get(" https://jsonplaceholder.typicode.com/comments/100")
 .potom((res) => {
konzoly.log (res.data.email);
 })
 .catch((chybovať) => {
konzoly.chyba (chyba);
 });
// Výkon:
// '[email protected]'
axios
 .patch(" https://jsonplaceholder.typicode.com/comments/100", {
 email: "[email protected]",
 })
 .potom((res) => {
konzoly.log (res.data.email);
 })
 .catch((chybovať) => {
konzoly.chyba (chyba);
 });
// Výkon:
// '[email protected]',

Tento program najprv odošle požiadavku GET na koncový bod " https://jsonplaceholder.typicode.com/comments/100". Potom zaznamená email vlastnosť komentára s ID 100 do konzoly. Vytvárame požiadavku GET, aby ste videli, čo sa zmenilo po zadaní požiadavky PATCH.

Druhá požiadavka je PATCH požiadavka na rovnaký koncový bod. Tento kód aktualizuje e-mail s komentárom na [email protected].

Vytváranie požiadaviek na VYMAZANIE pomocou Axios

Môžete použiť VYMAZAŤ žiadosť o vymazanie zdroja na serveri.

Vezmime si nasledujúci príklad, ako použiť .delete() metóda na odstránenie zdroja zo servera:

axios
 .delete(" https://jsonplaceholder.typicode.com/comments/10")
 .potom((res) => {
konzoly.log (res.data);
 })
 .catch((chybovať) => {
konzoly.chyba (chyba);
 });
//Output:
// {}

Prihlásením prázdneho objektu do konzoly vyššie uvedený kód ukazuje, že odstránil komentár s ID 10.

Simultánne požiadavky s Axios

Pomocou Axios môžete načítať údaje z viacerých koncových bodov naraz. Ak to chcete urobiť, musíte použiť .all() metóda. Táto metóda akceptuje pole požiadaviek ako svoj parameter a vyrieši sa iba vtedy, keď dostanete všetky odpovede.

V nasledujúcom príklade je .all() metóda získava údaje z dvoch koncových bodov súčasne:

axios
 .all([
 axios.get(" https://jsonplaceholder.typicode.com/comments? _limit=2"),
 axios.get(" https://jsonplaceholder.typicode.com/posts? _limit=2"),
 ])
 .potom(
 axios.spread((komentáre, príspevky) => {
konzoly.log (komentáre.údaje);
konzoly.log (posts.data);
 })
 )
 .catch((chybovať) =>konzoly.chyba (chyba));

Vyššie uvedený blok kódu odosiela požiadavky súčasne a potom odovzdá odpovede .potom() metóda. Axios .šírenie() metóda oddeľuje odpovede a priraďuje každú odpoveď jej premennej.

Nakoniec konzola zaznamená údajov vlastnosť dvoch odpovedí: komentárov a príspevkov.

Zachytávanie požiadaviek pomocou Axios

Niekedy môže byť potrebné zachytiť požiadavku skôr, ako sa dostane na server. Môžete použiť Axios' interceptors.request.use() spôsob zachytávania žiadostí.

V nasledujúcom príklade metóda zaznamená typ požiadavky do konzoly pre každú vykonanú požiadavku:

axios.interceptors.request.use(
 (config) => {
konzoly.log(`${config.method} podaná žiadosť“.);
vrátiť config;
 },
 (chyba) => {
vrátiťSľub.odmietnuť (chyba);
 }
);
axios
 .get(" https://jsonplaceholder.typicode.com/comments? _limit=2")
 .potom((res) =>konzoly.log (res.data))
 .catch((chybovať) =>konzoly.chyba (chyba));

Program definuje interceptor Axios pomocou axios.interceptors.request.use metóda. Táto metóda trvá config a chyba predmety ako argumenty. The config objekt obsahuje informácie o požiadavke vrátane metódy požiadavky (config.metóda) a adresu URL požiadavky (config.url).

Funkcia zachytávača vracia config objekt, čo umožňuje, aby žiadosť pokračovala normálne. Ak sa vyskytne chyba, funkcia vráti zamietnuté Sľub objekt.

Nakoniec program požiada o testovanie interceptora. Konzola zaznamená typ vykonanej požiadavky, v tomto prípade požiadavku GET.

V Axios je toho viac

Naučili ste sa vytvárať a zachytávať požiadavky vo vašich projektoch pomocou Axios. Mnoho ďalších funkcií, ako je transformácia požiadaviek a používanie inštancií Axios, máte ako vývojár JavaScriptu k dispozícii na preskúmanie. Axios zostáva preferovanou možnosťou na vytváranie požiadaviek HTTP vo vašich aplikáciách JavaScript. Fetch API je však ďalšou dobrou možnosťou, ktorú môžete preskúmať.