Frontend Academy · Lekcja

Axios: interceptory i bazowy URL

Proszę utworzyć instancję Axios z baseURL, dołączać tokeny uwierzytelniania w interceptorach żądań oraz obsługiwać błędy 4xx/5xx w interceptorach odpowiedzi.

Lekcja 2 z 414 kroki

Axios: interceptory i bazowy URL to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.

Dlaczego warto używać Axios?

Axios to popularny klient HTTP oparty na XMLHttpRequest. Zapewnia między innymi automatyczną obsługę JSON, interceptory żądań i odpowiedzi, konfigurację baseURL, limit czasu oraz tokeny anulowania żądań. Wiele zespołów nadal preferuje go zamiast fetch.

Instalowanie Axios

Należy zainstalować pakiet za pomocą npm. Rozmiar pakietu przeglądarkowego po kompresji gzip wynosi około 14 KB.

npm install axios

Podstawowe żądania GET i POST

Axios automatycznie konwertuje treści JSON na ciągi znaków i analizuje odpowiedzi JSON — nie trzeba ręcznie wywoływać JSON.stringify ani .json().

import axios from 'axios';

const { data } = await axios.get('/api/users');
console.log(data); // already parsed

const res = await axios.post('/api/users', { name: 'Alice' });
console.log(res.data, res.status);

Tworzenie instancji Axios

Należy utworzyć skonfigurowaną instancję dla API, aby nie powtarzać podstawowego adresu URL, nagłówków i limitu czasu przy każdym wywołaniu.

import axios from 'axios';

export const api = axios.create({
  baseURL: import.meta.env.VITE_API_URL,
  timeout: 10000,
  headers: { 'Content-Type': 'application/json' }
});

// Use it:
const { data } = await api.get('/users');
const res = await api.post('/users', { name: 'Alice' });

Interceptor żądania: token uwierzytelniający

Dodaj token uwierzytelniający do każdego żądania bez powtarzania tego kodu.

api.interceptors.request.use((config) => {
  const token = localStorage.getItem('token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

Interceptor odpowiedzi: globalna obsługa błędów

Należy scentralizować obsługę błędów wszystkich odpowiedzi: przekierowywać po 401, wyświetlać powiadomienie po 5xx itd.

api.interceptors.response.use(
  (response) => response,
  (error) => {
    if (error.response?.status === 401) {
      window.location.href = '/login';
    }
    if (error.response?.status >= 500) {
      toast.error('Server error. Please try again.');
    }
    return Promise.reject(error);
  }
);

Odświeżanie tokenu po 401

Należy użyć interceptora odpowiedzi, aby wykryć 401, odświeżyć token i w sposób niewidoczny dla użytkownika ponowić pierwotne żądanie.

api.interceptors.response.use(null, async (error) => {
  const originalRequest = error.config;
  if (error.response?.status === 401 && !originalRequest._retry) {
    originalRequest._retry = true;
    const newToken = await refreshToken();
    localStorage.setItem('token', newToken);
    originalRequest.headers.Authorization = `Bearer ${newToken}`;
    return api(originalRequest); // retry
  }
  return Promise.reject(error);
});

Parametry URL i zapytania

Axios akceptuje obiekt params — automatycznie serializuje go do ciągu zapytania.

const { data } = await api.get('/search', {
  params: { q: 'react hooks', page: 2 }
});
// GET /search?q=react+hooks&page=2

Limity czasu

Ustaw limit czasu żądania, aby uniknąć zawieszenia na wolnym serwerze.

api.get('/slow-endpoint', { timeout: 5000 })
  .catch(err => {
    if (err.code === 'ECONNABORTED') {
      console.log('Request took too long');
    }
  });

Anulowanie żądań

Użyj AbortController (w nowoczesnym Axiosie) lub CancelToken (w starszym API).

const controller = new AbortController();

api.get('/big-data', { signal: controller.signal })
  .catch(err => {
    if (axios.isCancel(err)) console.log('cancelled');
  });

controller.abort();

Struktura obiektu błędu

Błędy Axios zawierają error.response (serwer odpowiedział statusem błędu), error.request (nie otrzymano odpowiedzi) albo nie zawierają żadnego z nich (konfiguracja żądania się nie powiodła).

Axios czy Fetch — kiedy wybrać

Axios: przejrzystsze API, wbudowane interceptory, prostsza obsługa błędów. Fetch: natywny, mniejszy bundle, nowoczesna obsługa strumieniowania. W nowych projektach często wybiera się fetch + cienką warstwę opakowującą; istniejące projekty korzystające z Axios rzadko przechodzą na inne rozwiązanie.

Szybkie sprawdzenie

Jaka funkcja Axios pozwala dodać nagłówek Authorization do każdego żądania bez modyfikowania każdego wywołania z osobna?

Odpowiedz w interaktywnej lekcji

Podsumowanie: Axios

axios.create() służy do tworzenia skonfigurowanych instancji z baseURL i timeout. Odpowiedzi JSON są automatycznie parsowane (res.data). Interceptory żądań dołączają tokeny; interceptory odpowiedzi obsługują błędy i odświeżają tokeny. Obiekt params służy do tworzenia ciągów zapytań. AbortController służy do anulowania żądań. Wybierz Axios, jeśli zależy Ci na przejrzystości; fetch + wrapper, jeśli chcesz uzyskać mniejszy bundle.

Bezpłatny start

Ucz się HTML dzięki korepetycjom AI — za darmo

Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.

Kursy: 41
Lekcje: 163

Zacznij naukę bezpłatnie Wyświetl pełny kurs

Często zadawane pytania

Czy lekcja „Axios: interceptory i bazowy URL” jest bezpłatna?

Tak — pełny tekst „Axios: interceptory i bazowy URL” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Axios: interceptory i bazowy URL”?

Proszę utworzyć instancję Axios z baseURL, dołączać tokeny uwierzytelniania w interceptorach żądań oraz obsługiwać błędy 4xx/5xx w interceptorach odpowiedzi. Ćwiczysz Frontend Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Frontend Academy?

Nie wymagamy żadnego doświadczenia. Frontend Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.

Ile czasu zajmuje lekcja „Axios: interceptory i bazowy URL”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Frontend Academy?

Tak. Każda lekcja Frontend Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do Frontend Academy