În calitate de dezvoltator autodidact, am pus la încercare lumea largă a tutoriilor gratuite/plătite de pe internet. Un lucru pe care îl văd apărând din nou și din nou în tutoriale care efectuează cereri HTTP este utilizarea unei biblioteci JavaScript numită Axios. Am vrut să înțeleg de ce o gamă atât de largă de educatori de dezvoltare web folosesc această bibliotecă aparent discretă. Așa că am decis să sap pentru a oferi o explicație foarte simplă și directă a ceea ce oferă Axios și de ce merită (probabil) să fie folosită.
Ce face
În câteva cuvinte, Axios este o bibliotecă Javascript folosită pentru a face cereri HTTP din node.js sau XMLHttpRequests din browser care suportă și API-ul ES6 Promise. Grozav, deci din asta înțelegem că face ceva ce putem face deja și care a fost îmbunătățit recent în mod semnificativ… Deci, de ce să ne mai deranjăm?
Ce urmărește să îmbunătățească: .fetch()
Fetch folosește un proces în doi pași atunci când tratează date JSON; după ce faceți o cerere inițială, va trebui apoi să apelați metoda .json() pe răspuns pentru a primi obiectul de date real. Dacă aș avea o solicitare fetch pentru a primi înapoi un obiect cu șoferii relevanți pentru aplicația mea de căutare de mașini în comun, aș putea avea ceva de genul următor:
const baseUrl = 'http://localhost:3000/api/v1'fetch(`${baseUrl}/drivers`).then(res => res)
Aceasta ar returna o promisiune în așteptare și un obiect de răspuns care să mă anunțe că solicitarea mea a avut succes, dar unde sunt datele mele?! Trebuie să ne amintim să trecem răspunsul nostru și în metoda .json().
const baseUrl = 'http://localhost:3000/api/v1'fetch(`${baseUrl}/drivers`).then(res => res.json())
Acum, asta nu este o mare problemă, ca multe alte lucruri, se reduce de fapt la memorarea sintaxei. Dar, în calitate de dezvoltatori, suntem în același timp cele mai leneșe și cele mai eficiente creaturi de pe planetă – așa că orice fel de stenogramă sau economie de timp merită luată în considerare, intrați în Axios.
Manipulare mai bună a erorilor
Există o muncă suplimentară pe care trebuie să o depunem la sfârșitul nostru (din nou, s-ar putea argumenta că aceasta este doar o chestiune de memorare a sintaxei) pentru rezultatul dorit atunci când vine vorba de înregistrarea corectă a erorilor de răspuns cu .fetch(). MDN explică:
O promisiune
fetch()va respinge cu unTypeErroratunci când se întâlnește o eroare de rețea sau CORS este configurat greșit pe partea serverului, deși acest lucru înseamnă, de obicei, probleme de permisiune sau similare – un 404 nu constituie o eroare de rețea, de exemplu.
Să presupunem că există ceva în neregulă cu variabila noastră baseUrl. Așteptarea ieșirii pentru următorul bloc de cod ar fi eroare, dar în schimb este ok. De ce se întâmplă acest lucru?
const baseUrl = 'http://localhost:3000/api/v1'fetch(`${baseUrl}/drivers`)
.catch(error => console.log('ok'))
.then(res => console.log('error'));
Se pare că fetch() respinge promisiunile doar în situații relativ rare de eroare de rețea, cum ar fi un eșec de căutare DNS. Din fericire, fetch() oferă un indicator simplu ok care indică dacă codul de stare al unui răspuns este sau nu în intervalul de succes. În general, ceea ce se întâmplă este că veți sfârși prin a scrie o funcție de tratare a erorilor de tip „one-size-fits-all” care să fie folosită la toate apelurile fetch().
Instalarea Axios
Căutarea de noi biblioteci este la fel de ușoară ca o plăcintă în aceste zile (Mmm… rhubarb), eu prefer npm. În rădăcina folderului de proiect deschideți un terminal, rulați npm install axios și sunteți gata. Acum, pentru a realiza aceeași cerere de preluare pe care am efectuat-o mai devreme, putem invoca axios.get() în locul metodei noastre de preluare astfel:
const baseUrl = 'http://localhost:3000/api/v1'axios.get(`${baseUrl}/drivers`).then(res => res)
Presto! Prin utilizarea axios eliminăm necesitatea de a transmite rezultatele cererii HTTP la metoda .json(). Axios returnează pur și simplu obiectul de date pe care îl așteptați imediat. În plus, orice tip de eroare cu o solicitare HTTP va executa cu succes blocul .catch() chiar din start. Iată o scurtă trecere în revistă a tuturor caracteristicilor sale principale, inclusiv câteva pe care nu le-am acoperit direct de pe pagina GitHub:
- Face XMLHttpRequests din browser
- Face cereri http din node.js
- Suportă API Promise
- Interceptează cererea și răspunsul
- Transformă datele de cerere și de răspuns
- Anulează cererile
- Transformări automate pentru datele JSON
- Suport de partea clientului pentru protecția împotriva XSRF
În concluzie, Axios este o îmbunătățire a calității vieții mai mult decât orice altceva. Dar făcând multe ajustări mici și incrementale ale calității vieții la propriul flux de lucru se poate îmbunătăți drastic calitatea și viteza de dezvoltare.
.