Axios i biblioteki HTTP

Wbudowany

fetch()

to podstawowy nadajnik radiowy naszego statku kosmicznego. Ale co, jeśli potrzebujemy zaawansowanego systemu komunikacyjnego z automatycznymi filtrami, retransmisjami i konfigurowalnym centrum dowodzenia? Wtedy sięgamy po Axios -- najpopularniejsza biblioteke HTTP dla JavaScript.

Dlaczego Axios zamiast fetch?

Fetch jest swietny do prostych zapytan, ale Axios oferuje wiele ulatwien:

1// FETCH - wymaga recznej obslugi
2const response = await fetch(url);
3if (!response.ok) throw new Error('Blad'); // fetch NIE rzuca bledow dla 4xx/5xx!
4const data = await response.json(); // trzeba recznie parsowac JSON
5
6// AXIOS - prostsze i bezpieczniejsze
7const { data } = await axios.get(url); // automatyczny JSON, rzuca bledy dla 4xx/5xx

Kluczowe roznice:

| Cecha | fetch() | Axios | |-------|---------|-------| | Parsowanie JSON | Reczne (

.json()

Instalacja i podstawy Axios

1// Instalacja: npm install axios
2
3import axios from 'axios';
4
5// GET - pobranie danych
6const response = await axios.get(
7  'https://api.space-center.com/planets'
8);
9console.log(response.data);   // dane (juz sparsowane!)
10console.log(response.status); // 200
11console.log(response.headers); // naglowki
12
13// POST - wyslanie danych (automatyczna serializacja JSON)
14const newMission = await axios.post(
15  'https://api.space-center.com/missions',
16  { name: 'Alpha Centauri', crew: 5 }
17);
18
19// PUT, DELETE
20await axios.put(url, updatedData);
21await axios.delete(url);

Tworzenie instancji API

Zamiast podawac base URL za kazdym razem, tworzymy skonfigurowana instancje:

1// Tworzymy klienta API z domyslna konfiguracja
2const spaceApi = axios.create({
3  baseURL: 'https://api.space-center.com',
4  timeout: 10000, // 10 sekund
5  headers: {
6    'Content-Type': 'application/json',
7    'X-Station-Id': 'ISS-2150',
8  },
9});
10
11// Teraz uzywamy krotszych sciezek
12const planets = await spaceApi.get('/planets');
13const missions = await spaceApi.get('/missions');
14const newMission = await spaceApi.post('/missions', {
15  name: 'Deep Space Survey',
16  destination: 'Proxima Centauri',
17});

Interceptory - filtry komunikacji

Interceptory to "filtry" na naszym kanale komunikacyjnym. Przechwytuja kazde zapytanie lub odpowiedz:

1// Interceptor zapytan - dodaje token autoryzacji
2spaceApi.interceptors.request.use(config => {
3  const token = localStorage.getItem('authToken');
4  if (token) {
5    config.headers.Authorization = \`Bearer \${token}\`;
6  }
7  console.log('Wysylam zapytanie:', config.url);
8  return config;
9});
10
11// Interceptor odpowiedzi - obsluga bledow
12spaceApi.interceptors.response.use(
13  response => {
14    // Sukces - zwroc dane
15    return response;
16  },
17  error => {
18    // Blad - obsluz globalnie
19    if (error.response?.status === 401) {
20      console.log('Sesja wygasla - przekierowanie do logowania');
21      window.location.href = '/login';
22    }
23    if (error.response?.status === 429) {
24      console.log('Zbyt wiele zapytan - sprobuj pozniej');
25    }
26    return Promise.reject(error);
27  }
28);

Transformacja zapytan i odpowiedzi

Axios pozwala transformowac dane przed wyslaniem i po odebraniu:

1const api = axios.create({
2  baseURL: 'https://api.space-center.com',
3  // Transformacja przed wyslaniem
4  transformRequest: [(data) => {
5    // Dodaj timestamp do kazdego zapytania
6    return JSON.stringify({
7      ...data,
8      timestamp: Date.now(),
9      source: 'space-station',
10    });
11  }],
12  // Transformacja po odebraniu
13  transformResponse: [(data) => {
14    const parsed = JSON.parse(data);
15    // Dodaj pole "fetchedAt" do kazdej odpowiedzi
16    return { ...parsed, fetchedAt: new Date().toISOString() };
17  }],
18});

Obsluga bledow w Axios

Axios automatycznie rzuca bledy dla kodow HTTP 4xx i 5xx:

1async function fetchPlanet(id) {
2  try {
3    const { data } = await spaceApi.get(
4      \`/planets/\${id}\`
5    );
6    return data;
7  } catch (error) {
8    if (error.response) {
9      // Serwer odpowiedzial z kodem bledu (4xx, 5xx)
10      console.error('Status:', error.response.status);
11      console.error('Dane:', error.response.data);
12    } else if (error.request) {
13      // Zapytanie wyslane, ale brak odpowiedzi (timeout, siec)
14      console.error('Brak odpowiedzi od serwera');
15    } else {
16      // Blad w konfiguracji zapytania
17      console.error('Blad konfiguracji:', error.message);
18    }
19    throw error;
20  }
21}

Axios w komponencie React

1import React, { useState, useEffect } from 'react';
2import axios from 'axios';
3
4const spaceApi = axios.create({
5  baseURL: 'https://swapi.dev/api',
6  timeout: 8000,
7});
8
9function CrewList() {
10  const [crew, setCrew] = useState([]);
11  const [loading, setLoading] = useState(true);
12  const [error, setError] = useState(null);
13
14  useEffect(() => {
15    const source = axios.CancelToken.source();
16
17    async function loadCrew() {
18      try {
19        const { data } = await spaceApi.get('/people/', {
20          cancelToken: source.token,
21        });
22        setCrew(data.results);
23      } catch (err) {
24        if (!axios.isCancel(err)) {
25          setError(err.message);
26        }
27      } finally {
28        setLoading(false);
29      }
30    }
31
32    loadCrew();
33    return () => source.cancel('Komponent odmontowany');
34  }, []);
35
36  if (loading) return <p>Skanowanie zalogi...</p>;
37  if (error) return <p>Blad: {error}</p>;
38
39  return (
40    <ul>
41      {crew.map(member => (
42        <li key={member.name}>{member.name}</li>
43      ))}
44    </ul>
45  );
46}

Axios to jak zaawansowany system komunikacji na mostku kapitanskim -- daje pelna kontrole nad kazdym zapytaniem, automatycznie obsluguje bledy i pozwala centralnie zarzadzac konfiguracja calej floty!

Przejdź do CodeWorlds→