Un ghid complet pentru lucrul cu Axios

Axios este o bibliotecă JavaScript care oferă un API simplu pentru trimiterea de solicitări HTTP din codul JavaScript de la partea clientului sau codul Node.js de pe partea serverului. Axios este construit pe API-ul JavaScript Promise, care face codul asincron mai ușor de întreținut.

Noțiuni introductive cu Axios

Puteți utiliza Axios în aplicația dvs. folosind o rețea de livrare de conținut (CDN) sau instalându-l în proiectul dvs.

Pentru a utiliza Axios direct în HTML, copiați linkul CDN de mai jos și inserați-l în secțiunea de cap a fișierului HTML:

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

Cu această abordare, puteți utiliza Axios și a acestuia metode HTTP în corpul scripturilor dvs. HTML. Axios poate, de asemenea consumați API-uri REST într-un cadru precum React.

Pentru a utiliza Axios într-un proiect Node.js, instalați-l în directorul de proiect folosind fie managerul de pachete npm, fie yarn:

npm instalează axios
# sau
fire adauga axios

După instalare, puteți începe să utilizați Axios în proiectul dvs. JavaScript:

const axios = cere("axios");

De-a lungul acestui ghid, veți lucra cu cele gratuite JSONPlaceholder API. În timp ce acest API are un set de resurse, veți utiliza numai /comments și /posts puncte finale. Punctele finale sunt adrese URL specifice care pot fi accesate pentru a prelua sau manipula date.

Efectuarea cererilor GET cu Axios

Există mai multe moduri de a face o solicitare GET folosind Axios. Cu toate acestea, sintaxa depinde în general de preferințe.

Una dintre modalitățile de a face o solicitare GET este utilizarea axios() metoda cu un obiect care specifică metoda cererii ca obține și adresa URL la care trimiteți solicitarea.

De exemplu:

const axios = cere("axios");
axios({
 metodă: "obține",
 url: " https://jsonplaceholder.typicode.com/comments",
})
 .apoi((res) => {
consolă.log (res.date);
 })
 .captură((a greșit) => {
consolă.eroare (eroare);
 });

Acest exemplu creează o promisiune folosind modelul de programare asincronă prin înlănţuirea .apoi() și .captură() metode. Promisiunea înregistrează răspunsul în consolă atunci când cererea are succes și înregistrează mesajul de eroare dacă cererea eșuează.

Axios oferă, de asemenea, o modalitate mai ușoară de a face cereri GET care elimină necesitatea de a trece un obiect prin înlănțuirea .obține() metoda la axios instanță.

De exemplu:

axios
 .obține(" https://jsonplaceholder.typicode.com/comments")
 .apoi((res) => {
consolă.log (res.date);
 })
 .captură((a greșit) => {
consolă.eroare (eroare);
 });

Efectuarea solicitărilor POST cu Axios

Efectuarea unei cereri POST cu Axios este similară cu efectuarea unei cereri GET. Puteți trimite date către un server folosind această solicitare.

Fragmentul de cod de mai jos este un exemplu de utilizare a lui Axios .post() metodă:

axios
 .post(" https://jsonplaceholder.typicode.com/comments", {
 Nume: „Jackson Smith”,
 e-mail: „[email protected]”,
 corp: „Aceasta este o piesă de artă”.,
 })
 .apoi((res) => {
consolă.log (res.date);
 })
 .captură((a greșit) => {
consolă.eroare (eroare);
 });

Codul face o solicitare POST către API-ul JSONPlaceholder pentru a crea un nou comentariu. The axios.post metoda trimite date către /comments punct final.

Datele trimise în cerere sunt un obiect cu a Nume, e-mail, și corp proprietate. Dacă cererea are succes, apoi metoda înregistrează datele răspunsului în consolă. Și dacă există o eroare, captură metoda înregistrează eroarea în consolă.

Efectuarea cererilor PUT/PATCH cu Axios

Puteți utiliza cererea PUT sau PATCH pentru a actualiza o resursă existentă pe server. În timp ce PUT înlocuiește întreaga resursă, PATCH actualizează doar câmpurile specificate.

Pentru a efectua o solicitare PUT sau PATCH cu Axios, trebuie să utilizați .a pune() sau .plasture() metode, respectiv.

Iată un exemplu despre cum să utilizați aceste metode pentru a actualiza e-mail proprietatea comentariului cu un id de 100:

const axios = cere("axios");
axios
 .obține(" https://jsonplaceholder.typicode.com/comments/100")
 .apoi((res) => {
consolă.log (res.data.email);
 })
 .captură((a greșit) => {
consolă.eroare (eroare);
 });
// Ieșire:
// „[email protected]”
axios
 .plasture(" https://jsonplaceholder.typicode.com/comments/100", {
 e-mail: „[email protected]”,
 })
 .apoi((res) => {
consolă.log (res.data.email);
 })
 .captură((a greșit) => {
consolă.eroare (eroare);
 });
// Ieșire:
// „[email protected]”,

Acest program face mai întâi o solicitare GET către punctul final " https://jsonplaceholder.typicode.com/comments/100". Apoi înregistrează e-mail proprietatea comentariului cu un ID de 100 la consolă. Facem o solicitare GET, astfel încât să puteți vedea ce s-a schimbat după ce ați făcut cererea PATCH.

A doua cerere este o solicitare PATCH către același punct final. Acest cod actualizează e-mailul comentariului la [email protected].

Efectuarea solicitărilor DELETE cu Axios

Puteți folosi ȘTERGE cerere de ștergere a unei resurse de pe server.

Luați următorul exemplu despre cum să utilizați .șterge() metoda de a șterge o resursă de pe server:

axios
 .șterge(" https://jsonplaceholder.typicode.com/comments/10")
 .apoi((res) => {
consolă.log (res.date);
 })
 .captură((a greșit) => {
consolă.eroare (eroare);
 });
//Output:
// {}

Înregistrând un obiect gol în consolă, codul de mai sus arată că a șters comentariul cu ID-ul 10.

Efectuarea de solicitări simultane cu Axios

Puteți prelua date de la mai multe puncte finale simultan folosind Axios. Pentru a face acest lucru, trebuie să utilizați .toate() metodă. Această metodă acceptă o serie de solicitări ca parametru și se rezolvă numai atunci când primiți toate răspunsurile.

În exemplul următor, .toate() metoda preia date de la două puncte finale simultan:

axios
 .toate([
 axios.get(" https://jsonplaceholder.typicode.com/comments? _limit=2"),
 axios.get(" https://jsonplaceholder.typicode.com/posts? _limit=2"),
 ])
 .apoi(
 axios.spread((comentarii, postări) => {
consolă.log (comentarii.date);
consolă.log (posts.data);
 })
 )
 .captură((a greșit) =>consolă.eroare (err));

Blocul de cod de mai sus trimite cereri simultan și apoi transmite răspunsurile către .apoi() metodă. a lui Axios .răspândire() metoda separă răspunsurile și atribuie fiecare răspuns variabilei sale.

În cele din urmă, consola înregistrează fișierul date proprietatea celor două răspunsuri: comentarii și postări.

Interceptarea cererilor cu Axios

Uneori, poate fi necesar să interceptați o solicitare înainte de a ajunge la server. Puteți folosi Axios interceptors.request.use() metoda de interceptare a cererilor.

În exemplul următor, metoda înregistrează tipul de solicitare în consolă pentru fiecare solicitare făcută:

axios.interceptors.request.use(
 (config) => {
consolă.Buturuga(`${config.method} cererea făcută`);
întoarcere config;
 },
 (eroare) => {
întoarcerePromisiune.reject (eroare);
 }
);
axios
 .obține(" https://jsonplaceholder.typicode.com/comments? _limit=2")
 .apoi((res) =>consolă.log (res.date))
 .captură((a greșit) =>consolă.eroare (err));

Programul definește un interceptor Axios folosind axios.interceptori.cerere.utilizare metodă. Această metodă necesită config și eroare obiectele ca argumente. The config obiectul conține informații despre cerere, inclusiv metoda solicitării (config.metoda) și adresa URL a cererii (config.url).

Funcția interceptor returnează config obiect, permițând cererii să decurgă normal. Dacă există o eroare, funcția returnează cele respinse Promisiune obiect.

În cele din urmă, programul face o cerere de testare a interceptorului. Consola va înregistra tipul de solicitare făcută, în acest caz, o cerere GET.

Mai mult la Axios

Ați învățat cum să faceți și să interceptați cereri în proiectele dvs. folosind Axios. Multe alte funcții, cum ar fi transformarea solicitărilor și utilizarea instanțelor Axios, sunt disponibile pentru dvs., ca dezvoltator JavaScript, pentru a le explora. Axios rămâne o opțiune preferată pentru a face solicitări HTTP în aplicațiile JavaScript. Cu toate acestea, Fetch API este o altă opțiune bună pe care o puteți explora.