Jako programista-samouk, przeszedłem przez szeroki świat darmowych/płatnych tutoriali internetowych. Coś, co ciągle pojawia się w tutorialach wykonujących żądania HTTP, to użycie biblioteki JavaScript o nazwie Axios. Chciałem zrozumieć, dlaczego tak wiele osób uczących tworzenia stron internetowych korzysta z tej pozornie niepozornej biblioteki. Postanowiłem więc zagłębić się w temat, aby dostarczyć bardzo proste, bezpośrednie wyjaśnienie tego, co oferuje Axios i dlaczego (prawdopodobnie) warto z niej korzystać.
Co robi
W skrócie, Axios jest biblioteką Javascript używaną do wykonywania żądań HTTP z node.js lub XMLHttpRequests z przeglądarki, która obsługuje również API ES6 Promise. Świetnie, więc z tego wnioskujemy, że robi coś, co już możemy zrobić i co ostatnio zostało znacznie ulepszone… Więc po co zawracać sobie głowę?
Co ma na celu ulepszenie: .fetch()
Fetch używa dwuetapowego procesu, gdy ma do czynienia z danymi JSON; po wykonaniu początkowego żądania będziesz musiał wywołać metodę .json() na odpowiedzi, aby otrzymać rzeczywisty obiekt danych. Jeśli miałbym żądanie fetch, aby uzyskać z powrotem obiekt odpowiednich kierowców dla mojej aplikacji carpool sourcing, mógłbym mieć coś takiego jak poniżej:
const baseUrl = 'http://localhost:3000/api/v1'fetch(`${baseUrl}/drivers`).then(res => res)
To zwróciłoby oczekującą obietnicę i obiekt odpowiedzi, dając mi znać, że moje żądanie się powiodło, ale gdzie są moje dane?! Musimy pamiętać, aby przekazać naszą odpowiedź do metody .json(), jak również.
const baseUrl = 'http://localhost:3000/api/v1'fetch(`${baseUrl}/drivers`).then(res => res.json())
Teraz to nie jest wielka sprawa, jak wiele rzeczy, to naprawdę sprowadza się do zapamiętania składni. Ale jako programiści, jesteśmy jednocześnie najbardziej leniwymi i najbardziej wydajnymi istotami na planecie – więc każdy rodzaj skrótu lub oszczędzania czasu jest wart rozważenia, enter Axios.
Poprawiona obsługa błędów
Jest trochę dodatkowej pracy, którą musimy włożyć na naszym końcu (ponownie, można argumentować, że jest to tylko kwestia zapamiętywania składni) dla pożądanego rezultatu, jeśli chodzi o prawidłowe rejestrowanie błędów odpowiedzi z .fetch(). MDN wyjaśnia:
A
fetch()promise odrzuci zTypeError, gdy napotkany zostanie błąd sieciowy lub CORS jest źle skonfigurowany po stronie serwera, chociaż zwykle oznacza to problemy z uprawnieniami lub podobne – 404 nie stanowi błędu sieciowego, na przykład.
Załóżmy, że coś jest nie tak z naszą baseUrl zmienną. Oczekiwanym wyjściem dla poniższego bloku kodu byłby błąd, ale zamiast tego jest ok. Dlaczego tak się dzieje?
const baseUrl = 'http://localhost:3000/api/v1'fetch(`${baseUrl}/drivers`)
.catch(error => console.log('ok'))
.then(res => console.log('error'));
Okazuje się, że fetch() odrzuca obietnice tylko w stosunkowo rzadkich sytuacjach błędów sieciowych, takich jak niepowodzenie DNS lookup. Na szczęście fetch() zapewnia prostą flagę ok, która wskazuje, czy kod statusu odpowiedzi jest w udanym zakresie, czy nie. Generalnie skończy się na tym, że napiszesz jedną, uniwersalną funkcję obsługi błędów, która będzie używana we wszystkich wywołaniach fetch().
Instalacja Axios
Pobieranie nowych bibliotek jest łatwe jak bułka z masłem w dzisiejszych czasach (Mmm… rabarbar), ja preferuję npm. W korzeniu folderu projektu otwórz terminal, uruchom npm install axios i wszystko gotowe. Teraz, aby osiągnąć to samo żądanie fetch, które wykonaliśmy wcześniej, możemy wywołać axios.get() w miejsce naszej metody fetch w następujący sposób:
const baseUrl = 'http://localhost:3000/api/v1'axios.get(`${baseUrl}/drivers`).then(res => res)
Presto! Używając axios usuwamy potrzebę przekazywania wyników żądania HTTP do metody .json(). Axios po prostu od razu zwraca obiekt danych, którego oczekujemy. Dodatkowo, każdy rodzaj błędu w żądaniu HTTP spowoduje pomyślne wykonanie bloku .catch() od razu po wyjęciu z pudełka. Oto krótki opis wszystkich podstawowych funkcji, w tym kilku, których nie uwzględniłem bezpośrednio na stronie GitHub:
- Make XMLHttpRequests from the browser
- Make http requests from node.js
- Obsługuje API Promise
- Przechwyć żądanie i odpowiedź
- Transformuj dane żądania i odpowiedzi
- Automatyczne transformacje dla danych JSON
- Obsługa po stronie klienta dla ochrony przed XSRF
Podsumowując, Axios to poprawa jakości życia bardziej niż cokolwiek innego. Ale wprowadzenie wielu małych, przyrostowych poprawek jakości życia do swojego przepływu pracy może drastycznie poprawić jakość i szybkość rozwoju.