Täydellinen opas Axios-työskentelyyn

Axios on JavaScript-kirjasto, joka tarjoaa yksinkertaisen API: n HTTP-pyyntöjen lähettämiseen asiakaspuolen JavaScript-koodista tai palvelinpuolen Node.js-koodista. Axios on rakennettu JavaScriptin Promise API: lle, joka tekee asynkronisesta koodista helpommin ylläpidettävän.

Axiosin käytön aloittaminen

Voit hyödyntää Axiosta sovelluksessasi sisällönjakeluverkon (CDN) avulla tai asentamalla sen projektiisi.

Jos haluat käyttää Axiosta suoraan HTML: ssä, kopioi alla oleva CDN-linkki ja lisää se HTML-tiedostosi head-osioon:

<käsikirjoitussrc=" https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js">käsikirjoitus>

Tällä lähestymistavalla voit käyttää Axiosta ja sen HTTP-menetelmiä HTML-skriptien rungossa. Axios voi myös kuluttaa REST-sovellusliittymiä Reactin kaltaisessa kehyksessä.

Jos haluat käyttää Axiosta Node.js-projektissa, asenna se projektihakemistoosi käyttämällä joko npm- tai yarn-pakettien hallintaa:

npm asennus axios
# tai
lanka lisää axios

Asennuksen jälkeen voit aloittaa Axiosin käytön JavaScript-projektissasi:

konst aksiot = vaatia("aksiot");

Tämän oppaan myötä työskentelet ilmaisen kanssa JSONPlaceholder API. Vaikka tällä API: lla on joukko resursseja, käytät vain /comments ja /posts päätepisteitä. Päätepisteet ovat tiettyjä URL-osoitteita, joita voidaan käyttää tietojen hakemiseksi tai käsittelemiseksi.

GET-pyyntöjen tekeminen Axiosilla

On olemassa useita tapoja tehdä GET-pyyntö Axiosin avulla. Syntaksi riippuu kuitenkin yleensä mieltymyksistä.

Yksi tavoista tehdä GET-pyyntö on käyttää axios() menetelmällä objektilla, joka määrittää pyyntömenetelmän muodossa saada ja URL-osoite, johon pyyntö lähetetään.

Esimerkiksi:

konst aksiot = vaatia("aksiot");
axios({
 menetelmä: "saada",
 url: " https://jsonplaceholder.typicode.com/comments",
})
 .sitten((res) => {
konsoli.log (res.data);
 })
 .ottaa kiinni((err) => {
konsoli.error (err);
 });

Tämä esimerkki luo lupaus käyttämällä asynkronista ohjelmointimallia ketjuttamalla .sitten() ja .ottaa kiinni() menetelmiä. Lupaus kirjaa vastauksen konsoliin, kun pyyntö on onnistunut, ja kirjaa lokiin virhesanoman, jos pyyntö epäonnistuu.

Axios tarjoaa myös helpomman tavan tehdä GET-pyyntöjä, jotka poistavat tarpeen ohittaa objektia ketjuttamalla .saada() menetelmään aksiot ilmentymä.

Esimerkiksi:

aksiot
 .saada(" https://jsonplaceholder.typicode.com/comments")
 .sitten((res) => {
konsoli.log (res.data);
 })
 .ottaa kiinni((err) => {
konsoli.error (err);
 });

POST-pyyntöjen tekeminen Axiosilla

POST-pyynnön tekeminen Axiosilla on samanlainen kuin GET-pyynnön tekeminen. Voit lähettää tietoja palvelimelle tällä pyynnöllä.

Alla oleva koodinpätkä on esimerkki Axiosin käytöstä .lähettää() menetelmä:

aksiot
 .lähettää(" https://jsonplaceholder.typicode.com/comments", {
 nimi: "Jackson Smith",
 sähköposti: "[email protected]",
 runko: "Tämä on taideteos.",
 })
 .sitten((res) => {
konsoli.log (res.data);
 })
 .ottaa kiinni((err) => {
konsoli.error (err);
 });

Koodi tekee POST-pyynnön JSONPlaceholder API: lle uuden kommentin luomiseksi. The axios.post menetelmä lähettää tiedot /comments päätepiste.

Pyynnössä lähetetty tieto on objekti, jolla on a nimi, sähköposti, ja kehon omaisuutta. Jos pyyntö onnistuu, sitten menetelmä kirjaa vastaustiedot konsoliin. Ja jos on virhe, ottaa kiinni menetelmä kirjaa virheen konsoliin.

PUT/PATCH-pyyntöjen tekeminen Axiosilla

Voit käyttää PUT- tai PATCH-pyyntöä päivittääksesi olemassa olevan resurssin palvelimella. Vaikka PUT korvaa koko resurssin, PATCH päivittää vain määritetyt kentät.

Jos haluat tehdä PUT- tai PATCH-pyynnön Axiosilla, sinun on käytettävä .laittaa() tai .patch() menetelmät vastaavasti.

Tässä on esimerkki näiden menetelmien päivittämisestä sähköposti Kommentin ominaisuus, jonka tunnus on 100:

konst aksiot = vaatia("aksiot");
aksiot
 .saada(" https://jsonplaceholder.typicode.com/comments/100")
 .sitten((res) => {
konsoli.log (res.data.email);
 })
 .ottaa kiinni((err) => {
konsoli.error (err);
 });
// Lähtö:
// '[email protected]'
aksiot
 .patch(" https://jsonplaceholder.typicode.com/comments/100", {
 sähköposti: "[email protected]",
 })
 .sitten((res) => {
konsoli.log (res.data.email);
 })
 .ottaa kiinni((err) => {
konsoli.error (err);
 });
// Lähtö:
// '[email protected]',

Tämä ohjelma tekee ensin GET-pyynnön päätepisteeseen " https://jsonplaceholder.typicode.com/comments/100". Se kirjaa sitten lokiin sähköposti kommentin ominaisuus, jonka tunnus on 100 konsoliin. Teemme GET-pyynnön, jotta näet, mikä muuttui PATCH-pyynnön tekemisen jälkeen.

Toinen pyyntö on PATCH-pyyntö samaan päätepisteeseen. Tämä koodi päivittää kommentin sähköpostin [email protected].

DELETE-pyyntöjen tekeminen Axiosilla

Voit käyttää POISTAA pyytää resurssin poistamista palvelimelta.

Otetaan seuraava esimerkki, kuinka käyttää .poistaa() tapa poistaa resurssi palvelimelta:

aksiot
 .poistaa(" https://jsonplaceholder.typicode.com/comments/10")
 .sitten((res) => {
konsoli.log (res.data);
 })
 .ottaa kiinni((err) => {
konsoli.error (err);
 });
//Output:
// {}

Kirjaamalla tyhjän objektin konsoliin yllä oleva koodi osoittaa, että se poisti kommentin, jonka tunnus on 10.

Samanaikaisten pyyntöjen tekeminen Axiosin kanssa

Voit hakea tietoja useista päätepisteistä kerralla Axiosin avulla. Tätä varten sinun on käytettävä .kaikki() menetelmä. Tämä menetelmä hyväksyy joukon pyyntöjä parametrikseen ja ratkaisee vain, kun saat kaikki vastaukset.

Seuraavassa esimerkissä .kaikki() menetelmä hakee tiedot kahdesta päätepisteestä samanaikaisesti:

aksiot
 .kaikki([
 axios.get(" https://jsonplaceholder.typicode.com/comments? _limit=2"),
 axios.get(" https://jsonplaceholder.typicode.com/posts? _limit=2"),
 ])
 .sitten(
 axios.spread((kommentit, postaukset) => {
konsoli.log (comments.data);
konsoli.log (posts.data);
 })
 )
 .ottaa kiinni((err) =>konsoli.error (err));

Yllä oleva koodilohko lähettää pyyntöjä samanaikaisesti ja välittää sitten vastaukset .sitten() menetelmä. Axiosin .levitän() menetelmä erottaa vastaukset ja määrittää jokaisen vastauksen muuttujaansa.

Lopuksi konsoli kirjaa lokiin tiedot kahden vastauksen ominaisuus: kommentit ja viestit.

Pyyntöjen sieppaaminen Axiosilla

Joskus saatat joutua sieppaamaan pyyntöä ennen kuin se pääsee palvelimelle. Voit käyttää Axiosta interceptors.request.use() tapa siepata pyyntöjä.

Seuraavassa esimerkissä menetelmä kirjaa pyynnön tyypin konsoliin jokaiselle tehdylle pyynnölle:

axios.interceptors.request.use(
 (config) => {
konsoli.Hirsi(`${config.method} tehty pyyntö".);
palata konfigurointi;
 },
 (virhe) => {
palataLupaus.hylkää (virhe);
 }
);
aksiot
 .saada(" https://jsonplaceholder.typicode.com/comments? _limit=2")
 .sitten((res) =>konsoli.log (res.data))
 .ottaa kiinni((err) =>konsoli.error (err));

Ohjelma määrittelee Axios sieppaajan käyttämällä axios.interceptors.request.use menetelmä. Tämä menetelmä kestää config ja virhe objektit argumentteina. The config objekti sisältää tietoja pyynnöstä, mukaan lukien pyyntömenetelmä (config.method) ja pyynnön URL-osoite (config.url).

Sieppaajafunktio palauttaa config vastustaa, jolloin pyyntö voi edetä normaalisti. Jos on virhe, funktio palauttaa hylätyn Lupaus esine.

Lopuksi ohjelma pyytää sieppaajan testaamista. Konsoli kirjaa tehdyn pyynnön tyypin, tässä tapauksessa GET-pyynnön.

Axioksessa on muutakin

Opit tekemään ja sieppaamaan pyyntöjä projekteissasi Axiosin avulla. JavaScript-kehittäjänä voit tutkia monia muita ominaisuuksia, kuten pyyntöjen muuntaminen ja Axios-esiintymien käyttö. Axios on edelleen ensisijainen vaihtoehto HTTP-pyyntöjen tekemiseen JavaScript-sovelluksissa. Fetch API on kuitenkin toinen hyvä vaihtoehto, jota voit tutkia.