Popoln vodnik za delo z Axios

Axios je knjižnica JavaScript, ki ponuja preprost API za pošiljanje zahtev HTTP iz kode JavaScript na strani odjemalca ali kode Node.js na strani strežnika. Axios je zgrajen na JavaScript Promise API, zaradi česar je asinhrono kodo lažje vzdrževati.

Kako začeti z Axios

Axios lahko uporabite v svoji aplikaciji prek omrežja za dostavo vsebine (CDN) ali ga namestite v svoj projekt.

Če želite Axios uporabljati neposredno v HTML, kopirajte spodnjo povezavo CDN in jo vstavite v razdelek glave vaše datoteke HTML:

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

S tem pristopom lahko uporabite Axios in njegove metode HTTP v telesu vaših skriptov HTML. Axios lahko tudi uporabljajo API-je REST v ogrodju, kot je React.

Če želite uporabiti Axios v projektu Node.js, ga namestite v svoj imenik projekta z uporabo upravitelja paketov npm ali yarn:

npm namestite axios
# oz
preje dodajte axios

Po namestitvi lahko začnete uporabljati Axios v svojem projektu JavaScript:

konst aksios = zahtevati('axios');

V tem vodniku boste delali z brezplačnimi JSONPlaceholder API. Čeprav ima ta API nabor virov, boste uporabili samo /comments in /posts končne točke. Končne točke so posebni URL-ji, do katerih je mogoče dostopati za pridobitev ali obdelavo podatkov.

Izdelava zahtev GET z Axios

Obstaja več načinov za izdelavo zahteve GET z uporabo Axios. Vendar je sintaksa na splošno odvisna od preference.

Eden od načinov za zahtevo GET je uporaba axios() metoda z objektom, ki podaja metodo zahteve kot dobiti in URL, na katerega želite poslati zahtevo.

Na primer:

konst aksios = zahtevati("aksios");
axios({
 metoda: "dobiti",
 url: " https://jsonplaceholder.typicode.com/comments",
})
 .potem((res) => {
konzola.log (res.podatki);
 })
 .catch((napaka) => {
konzola.napaka (napaka);
 });

Ta primer ustvarja obljubo z uporabo modela asinhronega programiranja z veriženjem .potem() in .catch() metode. Obljuba zabeleži odgovor na konzolo, ko je zahteva uspešna, in zabeleži sporočilo o napaki, če zahteva ne uspe.

Axios ponuja tudi lažji način za izdelavo zahtev GET, ki odpravijo potrebo po posredovanju predmeta z veriženjem .get() metoda za axios primerek.

Na primer:

axios
 .get(" https://jsonplaceholder.typicode.com/comments")
 .potem((res) => {
konzola.log (res.podatki);
 })
 .catch((napaka) => {
konzola.napaka (napaka);
 });

Izdelava zahtev POST z Axios

Izdelava zahteve POST z Axios je podobna izdelavi zahteve GET. S to zahtevo lahko pošljete podatke strežniku.

Spodnji delček kode je primer, kako uporabljati Axios' .post() metoda:

axios
 .post(" https://jsonplaceholder.typicode.com/comments", {
 ime: "Jackson Smith",
 E-naslov: "[email protected]",
 telo: "To je umetnina.",
 })
 .potem((res) => {
konzola.log (res.podatki);
 })
 .catch((napaka) => {
konzola.napaka (napaka);
 });

Koda pošlje zahtevo POST API-ju JSONPlaceholder za ustvarjanje novega komentarja. The axios.post metoda pošilja podatke v /comments končna točka.

Podatki, poslani v zahtevku, so objekt z a ime, E-naslov, in telo premoženje. Če je zahteva uspešna, se potem metoda zapiše podatke o odzivu v konzolo. In če pride do napake, ulov metoda zapiše napako v konzolo.

Izdelava zahtev PUT/PATCH z Axios

Za posodobitev obstoječega vira na strežniku lahko uporabite zahtevo PUT ali PATCH. Medtem ko PUT nadomesti celoten vir, PATCH posodobi samo določena polja.

Če želite narediti zahtevo PUT ali PATCH z Axios, morate uporabiti .put() ali .obliž() metod oz.

Tukaj je primer uporabe teh metod za posodobitev E-naslov lastnost komentarja z ID-jem 100:

konst aksios = zahtevati("aksios");
axios
 .get(" https://jsonplaceholder.typicode.com/comments/100")
 .potem((res) => {
konzola.log (res.data.email);
 })
 .catch((napaka) => {
konzola.napaka (napaka);
 });
// Izhod:
// '[email protected]'
axios
 .patch(" https://jsonplaceholder.typicode.com/comments/100", {
 E-naslov: "[email protected]",
 })
 .potem((res) => {
konzola.log (res.data.email);
 })
 .catch((napaka) => {
konzola.napaka (napaka);
 });
// Izhod:
// '[email protected]',

Ta program najprej naredi zahtevo GET do končne točke " https://jsonplaceholder.typicode.com/comments/100". Nato zabeleži E-naslov lastnost komentarja z ID-jem 100 na konzolo. Izdelamo zahtevo GET, da lahko vidite, kaj se je spremenilo po zahtevi PATCH.

Druga zahteva je zahteva PATCH do iste končne točke. Ta koda posodobi e-pošto komentarja na [email protected].

Izdelava zahtev DELETE z Axios

Lahko uporabite IZBRIŠI zahtevo za izbris vira na strežniku.

Vzemite naslednji primer, kako uporabiti .delete() metoda za brisanje vira s strežnika:

axios
 .delete(" https://jsonplaceholder.typicode.com/comments/10")
 .potem((res) => {
konzola.log (res.podatki);
 })
 .catch((napaka) => {
konzola.napaka (napaka);
 });
//Output:
// {}

Z beleženjem praznega objekta v konzolo zgornja koda pokaže, da je izbrisala komentar z ID-jem 10.

Izdaja hkratnih zahtev z Axios

Z Axios lahko pridobite podatke iz več končnih točk hkrati. Če želite to narediti, morate uporabiti .vse() metoda. Ta metoda sprejme niz zahtev kot svoj parameter in se razreši šele, ko prejmete vse odgovore.

V naslednjem primeru je .vse() metoda pridobi podatke iz dveh končnih točk hkrati:

axios
 .vse([
 axios.get(" https://jsonplaceholder.typicode.com/comments? _limit=2"),
 axios.get(" https://jsonplaceholder.typicode.com/posts? _limit=2"),
 ])
 .potem(
 axios.spread((komentarji, objave) => {
konzola.log (komentarji.podatki);
konzola.log (objave.podatki);
 })
 )
 .catch((napaka) =>konzola.error (err));

Zgornji blok kode istočasno pošilja zahteve in nato posreduje odgovore v .potem() metoda. Axiosov .širjenje() metoda ločuje odzive in vsakemu odgovoru dodeli svojo spremenljivko.

Končno konzola zabeleži podatke lastnost dveh odgovorov: komentarjev in objav.

Prestrezanje zahtev z Axios

Včasih boste morda morali prestreči zahtevo, preden pride do strežnika. Lahko uporabite Axios' interceptors.request.use() metoda za prestrezanje zahtev.

V naslednjem primeru metoda beleži vrsto zahteve v konzolo za vsako podano zahtevo:

axios.interceptors.request.use(
 (konfiguracija) => {
konzola.log(`${config.method} zahteva podana`);
vrnitev konfiguracija;
 },
 (napaka) => {
vrnitevObljuba.reject (napaka);
 }
);
axios
 .get(" https://jsonplaceholder.typicode.com/comments? _limit=2")
 .potem((res) =>konzola.log (res.data))
 .catch((napaka) =>konzola.error (err));

Program definira prestreznik Axios z uporabo axios.interceptors.request.use metoda. Ta metoda traja konfiguracija in napaka predmeti kot argumenti. The konfiguracija objekt vsebuje informacije o zahtevi, vključno z metodo zahteve (config.method) in URL zahteve (config.url).

Funkcija prestreznika vrne konfiguracija objekt, kar omogoča normalno nadaljevanje zahteve. Če pride do napake, funkcija vrne zavrnjeno Obljuba predmet.

Nazadnje program naredi zahtevo za testiranje prestreznika. Konzola bo zabeležila vrsto vložene zahteve, v tem primeru zahtevo GET.

Axios je še več

Naučili ste se, kako narediti in prestreči zahteve v svojih projektih z uporabo Axios. Številne druge funkcije, kot sta preoblikovanje zahtev in uporaba primerkov Axios, so vam kot razvijalcu JavaScript na voljo za raziskovanje. Axios ostaja prednostna možnost za izdelavo zahtev HTTP v vaših aplikacijah JavaScript. Vendar pa je Fetch API še ena dobra možnost, ki jo lahko raziščete.