Täielik juhend Axiosega töötamiseks

Axios on JavaScripti teek, mis pakub lihtsat API-d HTTP-päringute saatmiseks kliendipoolsest JavaScripti koodist või serveripoolsest Node.js-koodist. Axios on üles ehitatud JavaScripti Promise API-le, mis muudab asünkroonse koodi paremini hooldatavaks.

Axiosega alustamine

Saate Axiost oma rakenduses kasutada, kasutades sisu edastamise võrku (CDN) või installides selle oma projekti.

Axiose kasutamiseks otse HTML-is kopeerige allolev CDN-i link ja sisestage see oma HTML-faili peaosasse:

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

Selle lähenemisviisiga saate kasutada Axiost ja selle HTTP meetodid HTML-i skriptide põhiosas. Axios saab ka tarbivad REST API-sid sellises raamistikus nagu React.

Axiose kasutamiseks Node.js projektis installige see oma projekti kataloogi, kasutades npm või lõnga paketihaldurit.

npm install axios
# või
lõng lisa aksiosid

Pärast installimist võite alustada Axiose kasutamist oma JavaScripti projektis:

konst axios = nõuda("axios");

Koos selle juhendiga töötate tasuta JSONPlaceholder API. Kuigi sellel API-l on ressursside komplekt, kasutate ainult /comments ja /posts lõpp-punktid. Lõpp-punktid on konkreetsed URL-id, millele pääseb juurde andmete toomiseks või nendega manipuleerimiseks.

GET-i taotluste esitamine Axiosega

GET-päringu tegemiseks Axiose abil on mitu võimalust. Kuid süntaks sõltub üldiselt eelistustest.

Üks GET-päringu esitamise viise on kasutada axios() meetod objektiga, mis määrab päringumeetodi kui saada ja URL, kuhu päring saata.

Näiteks:

konst axios = nõuda("aksiod");
axios({
 meetod: "saada",
 url: " https://jsonplaceholder.typicode.com/comments",
})
 .hen((res) => {
konsool.log (res.data);
 })
 .catch((eks) => {
konsool.error (err);
 });

See näide loob lubadus asünkroonse programmeerimismudeli abil aheldades .hen() ja .catch() meetodid. Lubadus logib vastuse konsooli, kui päring on edukas, ja logib veateate, kui päring ebaõnnestub.

Axios pakub ka lihtsamat viisi GET-päringute tegemiseks, mis välistavad vajaduse objektist aheldades edasi anda .get() meetodit aksiosid näiteks.

Näiteks:

aksiosid
 .get(" https://jsonplaceholder.typicode.com/comments")
 .hen((res) => {
konsool.log (res.data);
 })
 .catch((eks) => {
konsool.error (err);
 });

POST-päringute tegemine Axiosega

POST-päringu tegemine Axiosega sarnaneb GET-päringu tegemisega. Selle päringu abil saate andmeid serverisse saata.

Allolev koodilõik on näide Axiose kasutamisest .post() meetod:

aksiosid
 .post(" https://jsonplaceholder.typicode.com/comments", {
 nimi: "Jackson Smith",
 email: "[email protected]",
 keha: "See on kunstiteos.",
 })
 .hen((res) => {
konsool.log (res.data);
 })
 .catch((eks) => {
konsool.error (err);
 });

Kood teeb uue kommentaari loomiseks POST-päringu JSONPlaceholder API-le. The axios.post meetod saadab andmed /comments lõpp-punkt.

Päringus saadetud andmed on objekt, millel on a nimi, email, ja keha vara. Kui taotlus on edukas, siis meetod logib vastuse andmed konsooli. Ja kui on viga, siis püüda meetod logib vea konsooli.

PUT/PATCH taotluste tegemine Axiosega

PUT- või PATCH-päringut saate kasutada serveris olemasoleva ressursi värskendamiseks. Kui PUT asendab kogu ressursi, siis PATCH värskendab ainult määratud välju.

PUT- või PATCH-päringu tegemiseks Axiosega peate kasutama .put() või .patch() meetodid.

Siin on näide selle kohta, kuidas neid meetodeid värskendamiseks kasutada email 100 ID-ga kommentaari omadus:

konst axios = nõuda("aksiod");
aksiosid
 .get(" https://jsonplaceholder.typicode.com/comments/100")
 .hen((res) => {
konsool.log (res.data.email);
 })
 .catch((eks) => {
konsool.error (err);
 });
// Väljund:
// '[email protected]'
aksiosid
 .patch(" https://jsonplaceholder.typicode.com/comments/100", {
 email: "[email protected]",
 })
 .hen((res) => {
konsool.log (res.data.email);
 })
 .catch((eks) => {
konsool.error (err);
 });
// Väljund:
// '[email protected]',

See programm teeb esmalt GET-päringu lõpp-punktile " https://jsonplaceholder.typicode.com/comments/100". Seejärel logib see email ID-ga kommentaari omadus 100 konsooli juurde. Teeme GET-päringu, et saaksite näha, mis muutus pärast PATCH-i päringu tegemist.

Teine päring on PATCH-i päring samale lõpp-punktile. See kood värskendab kommentaari meili [email protected].

Kustutamistaotluste tegemine Axiosega

Võite kasutada KUSTUTA serveris ressursi kustutamise taotlus.

Võtke järgmine näide selle kohta, kuidas kasutada .delete() meetod ressursi kustutamiseks serverist:

aksiosid
 .delete(" https://jsonplaceholder.typicode.com/comments/10")
 .hen((res) => {
konsool.log (res.data);
 })
 .catch((eks) => {
konsool.error (err);
 });
//Output:
// {}

Logides konsooli tühja objekti, näitab ülaltoodud kood, et see kustutas kommentaari ID-ga 10.

Axiosega samaaegsete päringute tegemine

Axiose abil saate andmeid tuua korraga mitmest lõpp-punktist. Selleks peate kasutama .all() meetod. See meetod aktsepteerib parameetrina taotluste massiivi ja lahendab ainult siis, kui saate kõik vastused.

Järgmises näites on .all() meetod hangib andmeid korraga kahest lõpp-punktist:

aksiosid
 .all([
 axios.get(" https://jsonplaceholder.typicode.com/comments? _limit=2"),
 axios.get(" https://jsonplaceholder.typicode.com/posts? _limit=2"),
 ])
 .hen(
 axios.spread((kommentaarid, postitused) => {
konsool.log (comments.data);
konsool.log (posts.data);
 })
 )
 .catch((eks) =>konsool.error (err));

Ülaltoodud koodiplokk saadab päringuid samaaegselt ja edastab seejärel vastused .hen() meetod. Axiose oma .levik() meetod eraldab vastused ja määrab iga vastuse oma muutujale.

Lõpuks logib konsool faili andmeid kahe vastuse omadus: kommentaarid ja postitused.

Taotluste pealtkuulamine Axiosega

Mõnikord peate võib-olla päringu pealtkuulama, enne kui see serverisse jõuab. Võite kasutada Axiost interceptors.request.use() meetod päringute pealtkuulamiseks.

Järgmises näites logib meetod konsooli päringu tüübi iga tehtud päringu puhul:

axios.interceptors.request.use(
 (config) => {
konsool.log(`${config.method} taotlus tehtud”.);
tagasi konfiguratsioon;
 },
 (viga) => {
tagasiLubadus.reject (viga);
 }
);
aksiosid
 .get(" https://jsonplaceholder.typicode.com/comments? _limit=2")
 .hen((res) =>konsool.log (res.data))
 .catch((eks) =>konsool.error (err));

Programm määratleb Axiose pealtkuulaja, kasutades axios.interceptors.request.use meetod. See meetod võtab konfig ja viga objektid argumentidena. The konfig objekt sisaldab teavet päringu kohta, sealhulgas päringu meetodit (config.method) ja päringu URL (config.url).

Pealtkuulaja funktsioon tagastab konfig vastu, võimaldades päringul normaalselt edasi minna. Vea korral tagastab funktsioon tagasilükatud Lubadus objektiks.

Lõpuks teeb programm taotluse pealtkuulaja testimiseks. Konsool logib tehtud päringu tüübi, antud juhul GET-päringu.

Axios on palju muud

Õppisite Axiose abil oma projektides taotlusi esitama ja pealtkuulama. Paljud muud funktsioonid, nagu taotluste teisendamine ja Axiose eksemplaride kasutamine, on teile kui JavaScripti arendajale uurimiseks saadaval. Axios jääb JavaScripti rakendustes HTTP-päringute tegemise eelistatud valikuks. Siiski on Fetch API veel üks hea võimalus, mida saate uurida.