En komplet guide til at arbejde med Axios

Axios er et JavaScript-bibliotek, der giver en simpel API til at sende HTTP-anmodninger fra JavaScript-kode på klientsiden eller Node.js-kode på serversiden. Axios er bygget på JavaScripts Promise API, som gør asynkron kode mere vedligeholdelsesvenlig.

Kom godt i gang med Axios

Du kan bruge Axios i din app ved at bruge et Content Delivery Network (CDN) eller installere det i dit projekt.

For at bruge Axios direkte i HTML skal du kopiere CDN-linket nedenfor og indsætte det i head-sektionen af ​​din HTML-fil:

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

Med denne tilgang kan du bruge Axios og dens HTTP metoder i brødteksten af ​​dine HTML-scripts. Axios kan også forbruge REST API'er i en ramme som React.

For at bruge Axios i et Node.js-projekt skal du installere det i din projektmappe ved hjælp af enten npm- eller garnpakkehåndteringen:

npm installere aksioer
# eller
garn tilføje aksioer

Efter installationen kan du begynde at bruge Axios i dit JavaScript-projekt:

konst axios = kræve('aksios');

Langs denne guide vil du arbejde med det gratis JSONPlaceholder API. Selvom denne API har et sæt ressourcer, vil du kun bruge /comments og /posts endepunkter. Endpoints er specifikke URL'er, der kan tilgås for at hente eller manipulere data.

Fremstilling af GET-anmodninger med Axios

Der er flere måder at lave en GET-anmodning på ved hjælp af Axios. Syntaksen afhænger dog generelt af præference.

En af måderne at lave en GET-anmodning på er ved at bruge axios() metode med et objekt, der angiver anmodningsmetoden som få og den URL, som anmodningen skal sendes til.

For eksempel:

konst axios = kræve("aksios");
axios({
 metode: "få",
 url: " https://jsonplaceholder.typicode.com/comments",
})
 .derefter((res) => {
konsol.log (res.data);
 })
 .fangst((fejl) => {
konsol.fejl (fejl);
 });

Dette eksempel skaber et løfte ved hjælp af den asynkrone programmeringsmodel ved at lænke .derefter() og .fangst() metoder. Løftet logger svaret til konsollen, når anmodningen er vellykket, og logger fejlmeddelelsen, hvis anmodningen mislykkes.

Axios giver også en nemmere måde at lave GET-anmodninger på, der eliminerer behovet for at passere et objekt ved at kæde .få() metode til axios eksempel.

For eksempel:

axios
 .få(" https://jsonplaceholder.typicode.com/comments")
 .derefter((res) => {
konsol.log (res.data);
 })
 .fangst((fejl) => {
konsol.fejl (fejl);
 });

Fremstilling af POST-anmodninger med Axios

At lave en POST-anmodning med Axios svarer til at lave en GET-anmodning. Du kan sende data til en server ved hjælp af denne anmodning.

Kodestykket nedenfor er et eksempel på, hvordan man bruger Axios' .stolpe() metode:

axios
 .stolpe(" https://jsonplaceholder.typicode.com/comments", {
 navn: "Jackson Smith",
 e-mail: "[email protected]",
 legeme: "Dette er et stykke kunst.",
 })
 .derefter((res) => {
konsol.log (res.data);
 })
 .fangst((fejl) => {
konsol.fejl (fejl);
 });

Koden sender en POST-anmodning til JSONPlaceholder API om at oprette en ny kommentar. Det axios.post metoden sender data til /comments endepunkt.

De data, der sendes i anmodningen, er et objekt med en navn, e-mail, og legeme ejendom. Hvis anmodningen lykkes, skal derefter metoden logger svardataene til konsollen. Og hvis der er en fejl fangst metoden logger fejlen til konsollen.

Fremstilling af PUT/PATCH-anmodninger med Axios

Du kan bruge PUT- eller PATCH-anmodningen til at opdatere en eksisterende ressource på serveren. Mens PUT erstatter hele ressourcen, opdaterer PATCH kun de angivne felter.

For at lave en PUT- eller PATCH-anmodning med Axios skal du bruge .sætte() eller .lappe() metoder hhv.

Her er et eksempel på, hvordan du bruger disse metoder til at opdatere e-mail egenskab for kommentaren med et id på 100:

konst axios = kræve("aksios");
axios
 .få(" https://jsonplaceholder.typicode.com/comments/100")
 .derefter((res) => {
konsol.log (res.data.email);
 })
 .fangst((fejl) => {
konsol.fejl (fejl);
 });
// Output:
// '[email protected]'
axios
 .lappe(" https://jsonplaceholder.typicode.com/comments/100", {
 e-mail: "[email protected]",
 })
 .derefter((res) => {
konsol.log (res.data.email);
 })
 .fangst((fejl) => {
konsol.fejl (fejl);
 });
// Output:
// '[email protected]',

Dette program laver først en GET-anmodning til slutpunktet " https://jsonplaceholder.typicode.com/comments/100". Det logger derefter e-mail kommentarens ejendom med et ID på 100 til konsollen. Vi laver en GET-anmodning, så du kan se, hvad der er ændret efter at have lavet PATCH-anmodningen.

Den anden anmodning er en PATCH-anmodning til det samme endepunkt. Denne kode opdaterer e-mailen for kommentaren til [email protected].

Foretag DELETE-anmodninger med Axios

Du kan bruge SLET anmodning om at slette en ressource på serveren.

Tag følgende eksempel på, hvordan du bruger .delete() metode til at slette en ressource fra serveren:

axios
 .delete(" https://jsonplaceholder.typicode.com/comments/10")
 .derefter((res) => {
konsol.log (res.data);
 })
 .fangst((fejl) => {
konsol.fejl (fejl);
 });
//Output:
// {}

Ved at logge et tomt objekt til konsollen viser ovenstående kode, at den har slettet kommentaren med ID 10.

Fremstilling af samtidige anmodninger med Axios

Du kan hente data fra flere endepunkter på én gang ved hjælp af Axios. For at gøre dette skal du bruge .alle() metode. Denne metode accepterer en række anmodninger som sin parameter og løser kun, når du modtager alle svarene.

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

axios
 .alle([
 axios.get(" https://jsonplaceholder.typicode.com/comments? _grænse=2"),
 axios.get(" https://jsonplaceholder.typicode.com/posts? _grænse=2"),
 ])
 .derefter(
 axios.spread((kommentarer, indlæg) => {
konsol.log (kommentarer.data);
konsol.log (indlæg.data);
 })
 )
 .fangst((fejl) =>konsol.fejl (fejl));

Ovenstående kodeblok sender anmodninger samtidigt og sender derefter svarene til .derefter() metode. Axios's .spredning() metoden adskiller svarene og tildeler hvert svar til dens variabel.

Til sidst logger konsollen data egenskaben for de to svar: kommentarer og indlæg.

Aflytning af anmodninger med Axios

Nogle gange skal du muligvis opsnappe en anmodning, før den kommer til serveren. Du kan bruge Axios' interceptors.request.use() metode til at opsnappe anmodninger.

I det følgende eksempel logger metoden typen af ​​anmodning til konsollen for hver anmodning, der foretages:

axios.interceptors.request.use(
 (config) => {
konsol.log(`${config.method} fremsat anmodning«);
Vend tilbage config;
 },
 (fejl) => {
Vend tilbageLøfte.afvis (fejl);
 }
);
axios
 .få(" https://jsonplaceholder.typicode.com/comments? _grænse=2")
 .derefter((res) =>konsol.log (res.data))
 .fangst((fejl) =>konsol.fejl (fejl));

Programmet definerer en Axios interceptor ved hjælp af axios.interceptors.anmodning.brug metode. Denne metode tager config og fejl objekter som argumenter. Det config objektet indeholder oplysninger om anmodningen, herunder anmodningsmetoden (config.metode) og anmodnings-URL (config.url).

Interceptor-funktionen returnerer config genstand, så anmodningen kan forløbe normalt. Hvis der er en fejl, returnerer funktionen det afviste Løfte objekt.

Til sidst fremsætter programmet en anmodning om at teste interceptoren. Konsollen vil logge den type anmodning, der er lavet, i dette tilfælde en GET-anmodning.

Der er mere til Axios

Du lærte, hvordan du laver og opsnapper anmodninger i dine projekter ved hjælp af Axios. Mange andre funktioner, som at transformere anmodninger og bruge Axios-instanser, er tilgængelige for dig som JavaScript-udvikler at udforske. Axios er fortsat en foretrukken mulighed for at lave HTTP-anmodninger i dine JavaScript-applikationer. Fetch API er dog en anden god mulighed, som du kan udforske.