Hvordan komme med HTTP -forespørsler i JavaScript ved hjelp av Axios | Forklart med eksempler

Axios er strengt tatt et løftebasert JavaScript-bibliotek som kan inkluderes i prosjektet ditt ved å bruke enten Node Package Manager (NPM) eller CDN-vert aksios. Det brukes til å lage xmlhttpRequest fra nettleseren samt HTTP -forespørsler om prosjekter opprettet med NodeJS. Siden det kan fungere med både nodeprosjekter og for nettlesere, blir det ofte referert til som en isomorf modul.

Det er en HTTP -klient, som betyr at vi kan bruke den FÅ, POST, og Slett Metoder for å samhandle med APIer

Sette opp aksios i prosjektet ditt

Hvis du jobber med Node -pakken, kan du laste ned Axios ved å skrive inn følgende kommando i terminalen til kodeditoren din:

$ npm installer aksios

Hvis du jobber med Vanilla JavaScript, kan du inkludere CDN -hostede Axios i HTML -filen din ved å bruke følgende linje:

Også for å teste ut Axios, vil vi bruke Mock API levert av Req | Res. Og URLen til API er “https: // reqres.i/API/brukere ”.

Siden det er en tutorial for å vise deg hvordan du jobber med Axios for å komme med HTTP -forespørsler, vil vi derfor ikke manipulere med HTML -elementer. Vi har bare følgende linjer i HTML -nettsiden:

Axios HTTP -forespørsler

Få forespørsel med Axios

Å lage FÅ Forespørsler til API ved hjelp av API bruker vi følgende syntaks:

Axios.Get (URL).da (respons => ).fangst (feil => ());

La oss bruke denne syntaksen for å komme med en forespørsel til req | Res -brukerens API:

Axios.få ("https: // reqres.i/API/brukere ").da ((svar) =>
const brukere = svar.data.data;
konsoll.Logg ('Få brukere', brukere);
).fangst ((feil) => konsoll.feil (feil));

Men vi ønsker å pakke inn denne GET -metoden i en funksjon, så bruk følgende kodelinjer:

const getUsers = () =>
Axios
.få ("https: // reqres.i/API/brukere ")
.da ((svar) =>
const brukere = svar.data.data;
konsoll.Logg ('Få brukere', brukere);
)
.fangst ((feil) => konsoll.feil (feil));
;

Nå, alt vi trenger å gjøre er å kalle funksjonen getuesrs () med følgende kodeinje:

getUsers ();

Ved å kjøre HTML -filen, vil du se følgende resultater:

Hvis vi utvider denne oppføringen, vil vi kunne se responsen fra API mye tydeligere:

Vi gjorde en vellykket FÅ Be om å bruke Axios og trykte ut responsen på konsollen.

Legg ut forespørsel med Axios

For å komme med en postforespørsel med Axios, må du bruke følgende syntaks:

Axios.POST (URL).da ((svar) => ).fangst ((feil));

For å komme med en etterforespørsel til Req | res api, Vi bruker følgende kodelinjer som oppretter en ny bruker:

const createUer = (bruker) =>
Axios
.POST ("https: // reqres.in/api/brukere ", bruker)
.da ((svar) =>
const lagt tils = svar.data;
konsoll.Logg ('POST: Bruker er lagt til', lagt til);
)
.fangst ((feil) => konsoll.feil (feil));
;

Å påkalle dette Legg ut forespørsel, Vi må kalle denne funksjonen Opprett bruker(), Men før vi gjør det, må vi sjekke API -en om hvilken type JSON gjør det for en ny brukeroppretting. Så på Req | Req -nettstedet kan vi se følgende JSON -format for innleggsforespørselen:

Det tar en "Navn" Nøkkelverdipar og et "jobb" nøkkelverdipar. La oss kalle Opprett bruker() Funksjon med passende JSON inni den:

Opprett bruker(
Navn: "John Doe",
Jobb: "Revisor",
);

Kjør filen, og du vil se følgende resultat på nettleserkonsollen din:

Det er det, vi kunne sende en POST forespørsel til en API ved hjelp av Axios.

Slett forespørsel med Axios

For å komme med slettforespørsler med Axios til API må du bruke følgende syntaks

Axios.slett (url).da ((svar) => ).fangst ((feil) => ());

For å komme med slettforespørsel til Req | Res API, bruk følgende kodelinjer:

const Deleteuser = (id) =>
Axios
.slett ('https: // reqres.in/api/brukere/$ id ')
.da ((svar) =>
konsoll.logg ('slett: bruker fjernes', id);
)
.fangst ((feil) => konsoll.feil (feil));
;

Alt vi trenger å gjøre er å påkalle funksjonen Deleteuser ved å bruke følgende linje:

Deleteuser (2);

Kjør filen og observer resultatet på nettleserens konsoll:

Der du går, har vi kommet med en slettforespørsel til en API ved hjelp av Axios.

Konklusjon

Axios er en HTTP-klient som kan inkluderes i Node-prosjektene dine ved å bruke Node Package Manager eller i Vanilla JavaScript-prosjektet ved å bruke CDN-vert Axios. Axios brukes til å lage xmlhttprequests til en API, og det er strengt tatt et løftebasert bibliotek. I dette innlegget lærte vi hvordan vi kan samhandle med et eksternt API ved hjelp av Axios og lage annerledes FÅ, POST og Slett forespørsler til Api.