os-CMS

Axios to jedna z najważniejszych i najczęściej używanych bibliotek JavaScript służących do wykonywania żądań HTTP, która zrewolucjonizowała sposób komunikacji z serwerami w aplikacjach webowych. Ta promise-based biblioteka oferuje eleganckie API, które znacząco upraszcza wysyłanie asynchronicznych żądań HTTP do endpointów REST, obsługę odpowiedzi oraz zarządzanie zadaniami sieciowymi.

Tu przeczytasz:

Została zbudowana na bazie natywnego XMLHttpRequest w przeglądarkach i modułów HTTP w Node.js, dostarczając bardziej przyjazne API z zaawansowanymi funkcjonalnościami takimi jak interceptory, automatyczna transformacja danych JSON, zaawansowana obsługa błędów oraz wsparcie dla starszych przeglądarek.

Biblioteka charakteryzuje się uniwersalnością działania zarówno po stronie klienta, jak i serwera, oferując spójne doświadczenie programistyczne niezależnie od środowiska wykonania.

Jej popularność wynika z prostoty użycia, bogatego zestawu funkcji i doskonałej dokumentacji, co czyni ją idealnym wyborem dla projektów każdej wielkości.

Podstawy i charakterystyka biblioteki Axios

Czym jest Axios i dlaczego warto go używać

Axios to open-source’owa biblioteka JavaScript do wykonywania żądań HTTP w aplikacjach webowych. Nazwa „Axios” pochodzi od greckiego słowa oznaczającego „wartościowy” lub „godny”, co doskonale oddaje wartość tej biblioteki w świecie JavaScript. Axios jest klientem HTTP bazującym na obietnicach, działającym zarówno w przeglądarce, jak i w Node.js – zapewniając izomorficzne API, czyli taki sam kod po obu stronach.

Jedną z kluczowych cech Axios jest architektura oparta na obietnicach (promises), która bardzo dobrze współpracuje z async/await. Ta charakterystyka znacząco poprawia czytelność i utrzymanie kodu względem klasycznych callbacków.

Axios automatycznie dopasowuje metodę komunikacji do środowiska – używa XMLHttpRequest w przeglądarkach i natywnych modułów HTTP/HTTPS w Node.js.

Oferuje szerokie API oraz szereg udogodnień, których brakuje w Fetch API:

  • interceptory pozwalające na globalne przetwarzanie żądań i odpowiedzi,
  • automatyczne parsowanie odpowiedzi JSON,
  • wsparcie dla timeoutów i anulowania żądań,
  • wbudowaną ochronę przed atakami XSRF,
  • doskonałą dokumentację.

Architektura i sposób działania

Architektura Axios opiera się na modularności i rozszerzalności dzięki wzorcowi adaptera, który automatycznie dobiera odpowiednią implementację dla środowiska wykonania.

Kluczowym elementem Axios są interceptory. To system bardzo podobny do middleware w Express.js – przechwytują i modyfikują żądania przed wysłaniem oraz odpowiedzi przed dostarczeniem ich do aplikacji.

  • autoryzacja globalna – możliwa dzięki interceptorom;
  • logowanie akcji sieciowych – pozwala na audyt wszystkich żądań i odpowiedzi;
  • obsługa błędów oraz globalna transformacja danych – ułatwiają obsługę wyjątków i standaryzację komunikacji;
  • konfiguracja hierarchiczna – globalna, instancyjna, lokalna – zapewnia maksymalną elastyczność.

System konfiguracji Axios pozwala na definiowanie domyślnych ustawień na poziomie globalnym, instancji oraz pojedynczego żądania.

Kluczowe zalety w porównaniu z alternatywami

Najważniejsze różnice pomiędzy Axios a natywnym Fetch API można podsumować następująco:

Funkcjonalność Axios Fetch API
Automatyczne parsowanie JSON TAK NIE – wymaga .json()
Globalne interceptory TAK NIE
Anulowanie żądania TAK Częściowo
Obsługa timeout TAK NIE
Wsparcie XSRF TAK NIE
Obsługa błędów HTTP TAK, wszystkie statusy spoza 2xx traktuje jako błąd Wymaga ręcznej obsługi response.ok

Axios wyróżnia się bogatym API, łatwością przetwarzania błędów i zabezpieczeniami przed atakami XSRF, dlatego jest preferowanym wyborem w profesjonalnych projektach.

Instalacja i konfiguracja podstawowa

Metody instalacji Axios w projektach JavaScript

Instalację Axios można wykonać na kilka sposobów w zależności od potrzeb projektu:

  • npm install axios – najpopularniejsza metoda, integracja z Node.js, React, Vue, Angular itp.,
  • yarn add axios – alternatywna metoda dla użytkowników Yarn,
  • CDN – np. przez https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js lub https://unpkg.com/axios/dist/axios.min.js, pozwala na błyskawiczną integrację bez konfiguracji budowania.

Instalacja przez NPM lub Yarn dodaje Axios do package.json i pobiera wymagane pliki do node_modules.

Wersja z CDN jest idealna do szybkiego wdrożenia w mniejszych lub statycznych projektach bez narzędzi budujących.

Podstawowa konfiguracja i pierwsze żądanie

Po instalacji, należy zaimportować bibliotekę Axios do projektu. W zależności od środowiska możliwe są różne składnie:

  • import axios from 'axios’ – ES6,
  • const axios = require(’axios’) – Node.js/CommonJS,
  • const axios = require(’axios’).default – dla pełnej zgodności z TypeScript i CommonJS.

Pierwsze żądanie HTTP za pomocą Axios można wykonać bardzo prosto: axios.get('/user?ID=12345'), które zwraca Promise do dalszego przetwarzania metodami .then() oraz .catch().

Możliwe jest także tworzenie instancji Axios o własnej konfiguracji poprzez axios.create(): pozwala to ustawić domyślny baseURL, własne nagłówki, timeout itp.

Przykład stworzenia skonfigurowanej instancji:


const api = axios.create({ baseURL: 'https://api.example.com', timeout: 5000 });

Konfiguracja środowiskowa i zmienne

W profesjonalnych aplikacjach często potrzebna jest konfiguracja dla różnych środowisk:

  • development – lokalne środowisko programistyczne,
  • staging – środowisko testowe,
  • production – środowisko produkcyjne.

W React czy Vue zmienne środowiskowe ustawia się w plikach .env (np. REACT_APP_API_URL), a następnie wykorzystuje w konfiguracji instancji Axios.

Możliwa jest też konfiguracja globalna przez axios.defaults, co skutkuje jednolitymi ustawieniami (nagłówki, timeout, baseURL) dla wszystkich żądań.

Dzięki temu różne środowiska posiadają automatycznie dostosowaną konfigurację, a kod jest spójny i przejrzysty.

Podstawowe operacje HTTP z Axios

Żądania GET – pobieranie danych

Żądania GET są najczęściej wykorzystywane do pobierania danych z serwera. Axios pozwala na wykonanie takiego żądania przez axios.get(url) i obsługę odpowiedzi poprzez Promise.

Struktura odpowiedzi jest jednolita i zawiera:

  • data – właściwe dane odpowiedzi,
  • status – kod statusu HTTP,
  • headers – nagłówki z odpowiedzi,
  • config – konfigurację konkretnego żądania,
  • request – referencję do samego żądania.

Parametry można przekazywać zarówno wpisując je w URL, jak i przez obiekt params:

axios.get('/user', { params: { ID: 12345 } })

Druga metoda jest preferowana, bo Axios automatycznie serializuje i koduje parametry.

Zaawansowana konfiguracja obejmuje dodatkowe nagłówki, autoryzację, timeouty czy inne ustawienia:


axios.get('/api/data', { headers: { 'Authorization': 'Bearer token' }, timeout: 5000 })

Daje to kontrolę nad wszystkimi aspektami żądania HTTP.

Żądania POST – wysyłanie danych

Żądania POST służą do przesyłania danych do serwera, np. rejestracja, logowanie, upload pliku.

  • Podstawowy POST (JSON): axios.post('/api/users', { firstName: 'John', lastName: 'Doe' }) – Axios sam serializuje dane do JSON i ustala Content-Type: application/json;
  • POST multipart/form-data: przy wysyłce plików dodaj odpowiedni header Content-Type: multipart/form-data i użyj instancji FormData;
  • application/x-www-form-urlencoded: do klasycznych danych formularzowych, Axios automatycznie serializuje dane obiektowe.

Dzięki obsłudze zdarzeń takich jak onUploadProgress oraz onDownloadProgress można monitorować postęp wysyłania lub pobierania danych, co jest niezbędne przy uploadzie dużych plików.

To rozwiązanie sprawdza się w aplikacjach wymagających feedbacku dla użytkownika na bieżąco.

Żądania PUT, PATCH i DELETE

Te metody służą odpowiednio do aktualizacji całych (PUT), częściowych (PATCH) lub usuwania (DELETE) zasobów na serwerze:

  • PUT – axios.put(url, data, config) – dla pełnej aktualizacji obiektu;
  • PATCH – axios.patch(url, data, config) – dla zmiany niektórych pól zasobu;
  • DELETE – axios.delete(url, config) – dla kasowania zasobu, opcjonalnie z przekazaniem danych w data.

Każda z tych metod obsługuje pełen zakres opcji konfiguracyjnych – nagłówki, timeouty, interceptory czy obsługę błędów, co sprawia, że Axios jest bardzo przewidywalny i elastyczny niezależnie od wybranej operacji HTTP.