Potpuni vodič za rad s Axiosom

Axios je JavaScript biblioteka koja pruža jednostavan API za slanje HTTP zahtjeva iz JavaScript koda na strani klijenta ili koda Node.js na strani poslužitelja. Axios je izgrađen na JavaScriptovom Promise API-ju, koji čini asinkroni kod lakšim za održavanje.

Početak rada s Axiosom

Možete koristiti Axios u svojoj aplikaciji pomoću mreže za isporuku sadržaja (CDN) ili ga instalirati u svoj projekt.

Da biste koristili Axios izravno u HTML-u, kopirajte CDN poveznicu u nastavku i umetnite je u odjeljak glave svoje HTML datoteke:

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

Ovim pristupom možete koristiti Axios i njegove HTTP metode u tijelu vaših HTML skripti. Axios također može konzumiraju REST API-je u okviru kao što je React.

Da biste koristili Axios u Node.js projektu, instalirajte ga u svoj direktorij projekta pomoću npm ili yarn upravitelja paketa:

npm instalirati axios
# ili
pređa dodati axios

Nakon instalacije, možete početi koristiti Axios u svom JavaScript projektu:

konst axios = zahtijevati('axios');

Uz ovaj vodič, radit ćete s besplatnim JSON rezervirano mjesto API. Iako ovaj API ima skup resursa, vi ćete koristiti samo /comments i /posts krajnje točke. Krajnje točke su specifični URL-ovi kojima se može pristupiti da bi se dohvatili ili manipulirali podacima.

Izrada GET zahtjeva s Axiosom

Postoji više načina da napravite GET zahtjev koristeći Axios. Međutim, sintaksa općenito ovisi o preferencijama.

Jedan od načina da napravite GET zahtjev je korištenje axios() metoda s objektom koji specificira metodu zahtjeva kao dobiti i URL na koji želite poslati zahtjev.

Na primjer:

konst axios = zahtijevati("aksios");
axios({
 metoda: "dobiti",
 url: " https://jsonplaceholder.typicode.com/comments",
})
 .zatim((res) => {
konzola.log (rez.podaci);
 })
 .ulov((pogriješiti) => {
konzola.pogreška (pogriješiti);
 });

Ovaj primjer stvara obećanje korištenjem modela asinkronog programiranja ulančavanjem .zatim() i .ulov() metode. Obećanje bilježi odgovor konzoli kada je zahtjev uspješan i bilježi poruku o pogrešci ako zahtjev ne uspije.

Axios također pruža lakši način za izradu GET zahtjeva koji eliminiraju potrebu za prosljeđivanjem objekta lančanim povezivanjem .dobiti() metoda za axios primjer.

Na primjer:

axios
 .dobiti(" https://jsonplaceholder.typicode.com/comments")
 .zatim((res) => {
konzola.log (rez.podaci);
 })
 .ulov((pogriješiti) => {
konzola.pogreška (pogriješiti);
 });

Izrada POST zahtjeva s Axiosom

Izrada POST zahtjeva s Axiosom je slična izradi GET zahtjeva. Pomoću ovog zahtjeva možete poslati podatke poslužitelju.

Isječak koda u nastavku je primjer kako koristiti Axios' .post() metoda:

axios
 .post(" https://jsonplaceholder.typicode.com/comments", {
 Ime: "Jackson Smith",
 email: "jsmith@example.com",
 tijelo: "Ovo je umjetničko djelo.",
 })
 .zatim((res) => {
konzola.log (rez.podaci);
 })
 .ulov((pogriješiti) => {
konzola.pogreška (pogriješiti);
 });

Kod šalje POST zahtjev API-ju JSONPlaceholder za stvaranje novog komentara. The axios.post metoda šalje podatke u /comments krajnja točka.

Podaci koji se šalju u zahtjevu su objekt s a Ime, elektronička pošta, i tijelo vlasništvo. Ako je zahtjev uspješan, zatim metoda zapisuje podatke o odgovoru na konzolu. A ako postoji pogreška, ulov metoda zapisuje pogrešku na konzolu.

Izrada PUT/PATCH zahtjeva s Axiosom

Za ažuriranje postojećeg resursa na poslužitelju možete koristiti zahtjev PUT ili PATCH. Dok PUT zamjenjuje cijeli resurs, PATCH ažurira samo navedena polja.

Da biste napravili PUT ili PATCH zahtjev s Axiosom, morate koristiti .staviti() ili .zakrpa() metode odnosno.

Evo primjera kako koristiti ove metode za ažuriranje elektronička pošta svojstvo komentara s ID-om 100:

konst axios = zahtijevati("aksios");
axios
 .dobiti(" https://jsonplaceholder.typicode.com/comments/100")
 .zatim((res) => {
konzola.log (res.podaci.e-pošta);
 })
 .ulov((pogriješiti) => {
konzola.pogreška (pogriješiti);
 });
// Izlaz:
// 'Leone_Fay@orrin.com'
axios
 .zakrpa(" https://jsonplaceholder.typicode.com/comments/100", {
 email: "donaymilin@ether.com",
 })
 .zatim((res) => {
konzola.log (res.podaci.e-pošta);
 })
 .ulov((pogriješiti) => {
konzola.pogreška (pogriješiti);
 });
// Izlaz:
// 'donaymilin@ether.com',

Ovaj program prvo postavlja GET zahtjev krajnjoj točki " https://jsonplaceholder.typicode.com/comments/100". Zatim zapisuje elektronička pošta svojstvo komentara s ID-om od 100 na konzolu. Izrađujemo GET zahtjev kako biste mogli vidjeti što se promijenilo nakon postavljanja PATCH zahtjeva.

Drugi zahtjev je PATCH zahtjev za istu krajnju točku. Ovaj kod ažurira e-poštu komentara na donaymilin@ether.com.

Izrada DELETE zahtjeva s Axiosom

Možete koristiti IZBRISATI zahtjev za brisanje resursa na poslužitelju.

Uzmimo sljedeći primjer kako koristiti .izbrisati() metoda za brisanje resursa s poslužitelja:

axios
 .izbrisati(" https://jsonplaceholder.typicode.com/comments/10")
 .zatim((res) => {
konzola.log (rez.podaci);
 })
 .ulov((pogriješiti) => {
konzola.pogreška (pogriješiti);
 });
//Output:
// {}

Zapisivanjem praznog objekta na konzolu, gornji kod pokazuje da je izbrisao komentar s ID-om 10.

Izrada simultanih zahtjeva s Axiosom

Možete dohvatiti podatke s više krajnjih točaka odjednom koristeći Axios. Da biste to učinili, morate koristiti .svi() metoda. Ova metoda prihvaća niz zahtjeva kao svoj parametar i rješava se tek kada primite sve odgovore.

U sljedećem primjeru, .svi() metoda dohvaća podatke s dvije krajnje točke istovremeno:

axios
 .svi([
 axios.get(" https://jsonplaceholder.typicode.com/comments? _limit=2"),
 axios.get(" https://jsonplaceholder.typicode.com/posts? _limit=2"),
 ])
 .zatim(
 axios.spread((komentari, postovi) => {
konzola.log (komentari.podaci);
konzola.log (postovi.podaci);
 })
 )
 .ulov((pogriješiti) =>konzola.greška (greška));

Gornji blok koda istovremeno šalje zahtjeve, a zatim prosljeđuje odgovore na .zatim() metoda. Axiosov .širenje() metoda razdvaja odgovore i pridružuje svaki odgovor svojoj varijabli.

Na kraju, konzola zapisuje podaci svojstvo dvaju odgovora: komentara i postova.

Presretanje zahtjeva s Axiosom

Ponekad ćete možda morati presresti zahtjev prije nego što stigne do poslužitelja. Možete koristiti Axios' presretači.request.use() metoda za presretanje zahtjeva.

U sljedećem primjeru, metoda bilježi vrstu zahtjeva na konzolu za svaki zahtjev koji je napravljen:

axios.interceptors.request.use(
 (konfiguracija) => {
konzola.log(`${config.method} zahtjev napravljen`);
povratak konfiguracija;
 },
 (greška) => {
povratakObećanje.odbiti (greška);
 }
);
axios
 .dobiti(" https://jsonplaceholder.typicode.com/comments? _limit=2")
 .zatim((res) =>konzola.log (rez.podaci))
 .ulov((pogriješiti) =>konzola.greška (greška));

Program definira Axios presretač pomoću axios.presretači.zahtjev.uporaba metoda. Ova metoda traje konfiguracija i greška objekti kao argumenti. The konfiguracija objekt sadrži informacije o zahtjevu, uključujući metodu zahtjeva (config.method) i URL zahtjeva (config.url).

Funkcija presretač vraća konfiguracija objekt, dopuštajući normalno odvijanje zahtjeva. Ako postoji pogreška, funkcija vraća odbijeno Obećanje objekt.

Na kraju, program postavlja zahtjev za testiranje presretača. Konzola će zabilježiti vrstu zahtjeva, u ovom slučaju, GET zahtjev.

Axios ima više

Naučili ste kako postavljati i presretati zahtjeve u svojim projektima koristeći Axios. Mnoge druge značajke, poput transformiranja zahtjeva i korištenja instanci Axios dostupne su vam kao JavaScript razvojnom programeru za istraživanje. Axios ostaje poželjna opcija za izradu HTTP zahtjeva u vašim JavaScript aplikacijama. Međutim, Fetch API je još jedna dobra opcija koju možete istražiti.