En komplett veiledning for å jobbe med Axios

Axios er et JavaScript-bibliotek som gir et enkelt API for å sende HTTP-forespørsler fra JavaScript-kode på klientsiden eller Node.js-kode på serversiden. Axios er bygget på JavaScripts Promise API, som gjør asynkron kode mer vedlikeholdbar.

Komme i gang med Axios

Du kan bruke Axios i appen din ved å bruke et Content Delivery Network (CDN) eller installere det i prosjektet ditt.

For å bruke Axios direkte i HTML, kopier CDN-lenken nedenfor og sett den inn i head-delen av HTML-filen din:

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

Med denne tilnærmingen kan du bruke Axios og dens HTTP-metoder i hoveddelen av HTML-skriptene dine. Axios kan også bruker REST APIer i et rammeverk som React.

For å bruke Axios i et Node.js-prosjekt, installer det i prosjektkatalogen din ved å bruke enten npm eller garnpakkebehandling:

npm installer aksioer
# eller
garn legge til aksioer

Etter installasjonen kan du begynne å bruke Axios i JavaScript-prosjektet ditt:

konst axios = krever('aksios');

Langs denne veiledningen vil du jobbe med gratis JSONPlassholder API. Selv om denne API-en har et sett med ressurser, vil du bare bruke /comments og /posts endepunkter. Endepunkter er spesifikke URL-er som kan nås for å hente eller manipulere data.

Gjør GET-forespørsler med Axios

Det er flere måter å lage en GET-forespørsel ved å bruke Axios. Syntaksen avhenger imidlertid generelt av preferanse.

En av måtene å lage en GET-forespørsel på er å bruke axios() metode med et objekt som spesifiserer forespørselsmetoden som få og URL-en du vil sende forespørselen til.

For eksempel:

konst axios = krever("aksios");
axios({
 metode: "få",
 url: " https://jsonplaceholder.typicode.com/comments",
})
 .deretter((res) => {
konsoll.log (res.data);
 })
 .å fange((feil) => {
konsoll.feil (feil);
 });

Dette eksemplet skaper et løfte ved å bruke den asynkrone programmeringsmodellen ved å lenke .deretter() og .å fange() metoder. Løftet logger svaret til konsollen når forespørselen er vellykket og logger feilmeldingen hvis forespørselen mislykkes.

Axios gir også en enklere måte å lage GET-forespørsler som eliminerer behovet for å passere et objekt ved å lenke .få() metoden til aksioer forekomst.

For eksempel:

aksioer
 .få(" https://jsonplaceholder.typicode.com/comments")
 .deretter((res) => {
konsoll.log (res.data);
 })
 .å fange((feil) => {
konsoll.feil (feil);
 });

Gjør POST-forespørsler med Axios

Å lage en POST-forespørsel med Axios ligner på å lage en GET-forespørsel. Du kan sende data til en server ved å bruke denne forespørselen.

Kodebiten nedenfor er et eksempel på hvordan du bruker Axios' .post() metode:

aksioer
 .post(" https://jsonplaceholder.typicode.com/comments", {
 Navn: "Jackson Smith",
 e-post: "[email protected]",
 kropp: "Dette er et kunstverk.",
 })
 .deretter((res) => {
konsoll.log (res.data);
 })
 .å fange((feil) => {
konsoll.feil (feil);
 });

Koden sender en POST-forespørsel til JSONPlaceholder API om å opprette en ny kommentar. De axios.post metoden sender data til /comments endepunkt.

Dataene som sendes i forespørselen er et objekt med en Navn, e-post, og kropp eiendom. Hvis forespørselen er vellykket, deretter metoden logger svardataene til konsollen. Og hvis det er en feil å fange metoden logger feilen til konsollen.

Lage PUT/PATCH-forespørsler med Axios

Du kan bruke PUT- eller PATCH-forespørselen til å oppdatere en eksisterende ressurs på serveren. Mens PUT erstatter hele ressursen, oppdaterer PATCH bare de angitte feltene.

For å lage en PUT- eller PATCH-forespørsel med Axios, må du bruke .sette() eller .lapp() henholdsvis metoder.

Her er et eksempel på hvordan du bruker disse metodene for å oppdatere e-post egenskapen til kommentaren med en id på 100:

konst axios = krever("aksios");
aksioer
 .få(" https://jsonplaceholder.typicode.com/comments/100")
 .deretter((res) => {
konsoll.log (res.data.email);
 })
 .å fange((feil) => {
konsoll.feil (feil);
 });
// Utgang:
// '[email protected]'
aksioer
 .lapp(" https://jsonplaceholder.typicode.com/comments/100", {
 e-post: "[email protected]",
 })
 .deretter((res) => {
konsoll.log (res.data.email);
 })
 .å fange((feil) => {
konsoll.feil (feil);
 });
// Utgang:
// '[email protected]',

Dette programmet sender først en GET-forespørsel til endepunktet " https://jsonplaceholder.typicode.com/comments/100". Den logger deretter e-post egenskapen til kommentaren med en ID på 100 til konsollen. Vi lager en GET-forespørsel slik at du kan se hva som endret seg etter å ha sendt PATCH-forespørselen.

Den andre forespørselen er en PATCH-forespørsel til samme endepunkt. Denne koden oppdaterer e-posten til kommentaren til [email protected].

Gjør SLETTE-forespørsler med Axios

Du kan bruke SLETT forespørsel om å slette en ressurs på serveren.

Ta følgende eksempel på hvordan du bruker .delete() metode for å slette en ressurs fra serveren:

aksioer
 .delete(" https://jsonplaceholder.typicode.com/comments/10")
 .deretter((res) => {
konsoll.log (res.data);
 })
 .å fange((feil) => {
konsoll.feil (feil);
 });
//Output:
// {}

Ved å logge et tomt objekt til konsollen, viser koden ovenfor at den slettet kommentaren med ID 10.

Gir samtidige forespørsler med Axios

Du kan hente data fra flere endepunkter samtidig ved å bruke Axios. For å gjøre dette, må du bruke .alle() metode. Denne metoden godtar en rekke forespørsler som parameter og løser seg bare når du mottar alle svarene.

I det følgende eksempelet .alle() metoden henter data fra to endepunkter samtidig:

aksioer
 .alle([
 axios.get(" https://jsonplaceholder.typicode.com/comments? _limit=2"),
 axios.get(" https://jsonplaceholder.typicode.com/posts? _limit=2"),
 ])
 .deretter(
 axios.spread((kommentarer, innlegg) => {
konsoll.log (kommentarer.data);
konsoll.log (posts.data);
 })
 )
 .å fange((feil) =>konsoll.feil (feil));

Kodeblokken ovenfor sender forespørsler samtidig og sender deretter svarene til .deretter() metode. Axios sin .spre() metoden skiller svarene og tildeler hver respons til variabelen.

Til slutt logger konsollen data egenskapen til de to svarene: kommentarer og innlegg.

Avlytting av forespørsler med Axios

Noen ganger kan det hende du må avskjære en forespørsel før den kommer til serveren. Du kan bruke Axios' interceptors.request.use() metode for å avskjære forespørsler.

I følgende eksempel logger metoden typen forespørsel til konsollen for hver forespørsel som blir gjort:

axios.interceptors.request.use(
 (config) => {
konsoll.Logg(`${config.method} forespørsel fremsatt`);
komme tilbake config;
 },
 (feil) => {
komme tilbakeLove.avvis (feil);
 }
);
aksioer
 .få(" https://jsonplaceholder.typicode.com/comments? _limit=2")
 .deretter((res) =>konsoll.log (res.data))
 .å fange((feil) =>konsoll.feil (feil));

Programmet definerer en Axios-interceptor ved å bruke axios.interceptors.request.use metode. Denne metoden tar konfig og feil objekter som argumenter. De konfig objektet inneholder informasjon om forespørselen, inkludert forespørselsmetoden (config.metode) og forespørsels-URL (config.url).

Interceptor-funksjonen returnerer konfig objekt, slik at forespørselen kan fortsette normalt. Hvis det er en feil, returnerer funksjonen den avviste Love gjenstand.

Til slutt sender programmet en forespørsel om å teste interceptoren. Konsollen vil logge typen forespørsel som er gjort, i dette tilfellet en GET-forespørsel.

Det er mer til Axios

Du lærte hvordan du lager og avskjærer forespørsler i prosjektene dine ved å bruke Axios. Mange andre funksjoner, som transformering av forespørsler og bruk av Axios-forekomster, er tilgjengelige for deg som JavaScript-utvikler. Axios er fortsatt et foretrukket alternativ for å lage HTTP-forespørsler i JavaScript-applikasjonene dine. Imidlertid er Fetch API et annet godt alternativ du kan utforske.