Axios je poznati HTTP klijent koji React aplikacijama olakšava komunikaciju s API-jima. Axios je fantastičan način da native fetch API bude lakši za korištenje ili da rukovanje greškama bude čišće. Ovaj vodič vam govori sve što trebate znati o dobrom korištenju Axiosa u vašim projektima.
Što je Axios?
Axios je biblioteka koja vam omogućuje slanje HTTP zahtjeva temeljenih na promisima. Radi i u Node.js-u i u web preglednicima. Biblioteka je postala prvi izbor za React developere jer pojednostavljuje uobičajene zadatke koji bi inače zahtijevali više koda s native fetch API-jem.
Glavna razlika između Axiosa i fetcha je koliko su jednostavni za korištenje developerima. Axios automatski pretvara response podatke u JSON, ima ugrađeno rukovanje greškama za HTTP status kodove i dolazi s funkcijama poput request interceptora. Morali biste ručno parsirati JSON i provjeravati response status kodove kad biste koristili fetch.
Axios također radi sa starijim preglednicima koji nemaju polyfillove, pa je dobar izbor za projekte koji trebaju raditi s mnogo različitih preglednika. Biblioteka ima oko 13KB, što je fer kompromis za koliko je korisna.
Instalacija
Trebate samo jednu naredbu da dodate Axios u svoj React projekt. U direktoriju projekta otvorite terminal i upišite:
npm install axios
Ili koristeći yarn:
yarn add axios
Možete importati Axios u bilo koji dio svoje aplikacije nakon što ga instalirate. Biblioteka exporta defaultnu instancu koja radi odmah, ali većina projekata ima koristi od izrade vlastite konfiguracije.
Postavljanje Axios Instance
Možete koristiti Axios direktno, ali izrada konfigurirane instance pomaže da vaš kod bude uredan. Možete postaviti base URL, defaultne headere i timeout postavke sve na jednom mjestu s instancom. Ove postavke se automatski prenose na svaki zahtjev napravljen kroz tu instancu.
import axios from 'axios';
export const api = axios.create({
baseURL: import.meta.env.VITE_API_URL,
headers: {
'Content-Type': 'application/json',
},
timeout: 10000,
});
Nemojte hardkodirati svoj API URL; umjesto toga stavite ga u environment datoteku. Ova metoda olakšava prebacivanje između development i production okruženja. Napravite .env datoteku u rootu vašeg projekta i stavite svoju API adresu u nju.
VITE_API_URL=https://api.example.com
Nakon što ste to postavili, koristite ovu instancu u svojoj aplikaciji umjesto defaultnog Axiosa. Ova metoda osigurava da se svi API pozivi ponašaju na isti način i olakšava izmjene u budućnosti.
Slanje GET Zahtjeva
GET zahtjevi dohvaćaju podatke sa servera. Kada se komponenta mounta u Reactu, obično šaljete ove zahtjeve unutar useEffect hooka. Axios vam daje promise koji se resolvea s response objektom koji sadrži vaše podatke.
useEffect(() => {
const fetchUsers = async () => {
try {
const { data } = await api.get('/users');
setUsers(data);
} catch (error) {
console.error('Nije moguće učitati korisnike');
}
};
fetchUsers();
}, []);
Axios response objekt ima nekoliko svojstava. Svojstvo data sadrži stvarni response payload. Možete također vidjeti HTTP kod status, response headers i request config.
Možete slati query parametre kroz params opciju. Ne morate ručno raditi query stringove jer Axios radi URL encoding za vas.
const { data } = await api.get('/users', {
params: {
page: 1,
limit: 10,
search: 'john',
},
});
Slanje POST Zahtjeva
POST zahtjevi šalju podatke na server, obično za kreiranje novih resursa. Proslijedite svoje podatke kao drugi argument post metodi. Axios automatski pretvara JavaScript objekte u JSON i dodaje ispravan content type header.
const handleSubmit = async (formData: CreateUserPayload) => {
try {
const { data } = await api.post('/users', formData);
return data;
} catch (error) {
console.error('Nije uspjelo kreiranje korisnika');
}
};
Za upload datoteka koristite FormData umjesto običnog objekta. Postavite content type na multipart/form-data u postavkama zahtjeva.
const uploadFile = async (file: File) => {
const formData = new FormData();
formData.append('file', file);
const { data } = await api.post('/upload', formData, {
headers: {
'Content-Type': 'multipart/form-data',
},
onUploadProgress: progressEvent => {
const percent = Math.round((progressEvent.loaded * 100) / (progressEvent.total ?? 1));
console.log(`Napredak uploada: ${percent}%`);
},
});
return data;
};
Možete koristiti onUploadProgress callback u Axiosu za praćenje napretka uploada. Ovo je korisno za prikazivanje progress barova kod uploadanja velikih datoteka.
PUT, PATCH i DELETE Zahtjevi
Ažuriranje i brisanje resursa radi na isti način kao GET i POST. Za zamjenu cijelog resursa koristite api.put(). Za ažuriranje dijela koristite api.patch(). Za brisanje koristite api.delete(). Svaka metoda treba endpoint URL i može također trebati podatke ili postavke.
// Zamijeni cijeli resurs
const updateUser = async (id: number, userData: User) => {
const { data } = await api.put(`/users/${id}`, userData);
return data;
};
// Ažuriraj samo određena polja
const updateUserEmail = async (id: number, email: string) => {
const { data } = await api.patch(`/users/${id}`, { email });
return data;
};
// Obriši resurs
const deleteUser = async (id: number) => {
await api.delete(`/users/${id}`);
};
Ovisno o tome kako dizajnirate svoj API, možete birati između PUT i PATCH. PUT obično želi punu reprezentaciju resursa, ali PATCH vam dopušta slanje samo polja koja su se promijenila. Većina modernih API-ja radi s obje metode.
Rukovanje Greškama
Axios ima bolje strukturirano rukovanje greškama nego fetch. Kada zahtjev ne uspije, Axios rejecta promise i vraća error objekt s puno informacija o tome što je pošlo po zlu.
Error objekt ima response svojstvo za serverske greške (4xx i 5xx status kodovi), request svojstvo za slučaj kad nije bilo responsa i message svojstvo za druge tipove grešaka. Ova struktura vam omogućuje davanje ispravne povratne informacije za različite vrste pogrešaka.
try {
const { data } = await api.get('/users');
return data;
} catch (error) {
if (axios.isAxiosError(error)) {
if (error.response) {
// Server je odgovorio s error statusom (4xx, 5xx)
console.error('Serverska greška:', error.response.status);
console.error('Podaci greške:', error.response.data);
} else if (error.request) {
// Zahtjev je poslan ali nije primljen response
console.error('Mrežna greška');
} else {
// Nešto drugo je pošlo po zlu
console.error('Greška:', error.message);
}
}
throw error;
}
Vaša aplikacija će bolje rukovati neuspjesima ako stavite API pozive u try-catch blokove. Kada nešto pođe po zlu, korisnici bi uvijek trebali dobiti povratnu informaciju umjesto zamrznutog sučelja.
Korištenje Interceptora
Možete pokretati kod interceptora prije nego zahtjevi napuste vašu aplikaciju ili nakon što responsi stignu. Najčešći slučaj korištenja je automatsko dodavanje autentifikacijskih tokena na svaki zahtjev.
Request interceptori dobivaju konfiguracijski objekt prije nego se zahtjev pošalje. Možete mijenjati headere, logirati zahtjeve ili mijenjati podatke. Response interceptori se brinu o responsu prije nego stigne do vašeg koda. Ova funkcija je korisna za ispravljanje pogrešaka ili mijenjanje podataka na velikoj skali.
// Request interceptor - dodaj auth token
api.interceptors.request.use(config => {
const token = localStorage.getItem('auth_token');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
});
// Response interceptor - globalno rukovanje greškama
api.interceptors.response.use(
response => response,
error => {
if (error.response?.status === 401) {
localStorage.removeItem('auth_token');
window.location.href = '/login';
}
return Promise.reject(error);
}
);
Jednom kada postavite interceptore, više nikada ne morate ručno dodavati tokene pojedinačnim zahtjevima. Vaš kod komponente se može fokusirati na poslovnu logiku jer interceptor rukuje autentifikacijom u pozadini.
Otkazivanje Zahtjeva
React komponente se mogu unmountati čak i ako još ima zahtjeva koji čekaju. Ako response stigne nakon unmountanja, pokušaj ažuriranja statea uzrokovat će upozorenja i moguće curenje memorije. AbortController API vam omogućuje otkazivanje zahtjeva u Axiosu.
Na početku vašeg effecta napravite AbortController i pošaljite njegov signal zahtjevu. Kada se komponenta unmounta, pozovite abort u cleanup funkciji da otkažete sve zahtjeve koji su još otvoreni.
useEffect(() => {
const controller = new AbortController();
api
.get('/users', { signal: controller.signal })
.then(({ data }) => setUsers(data))
.catch(err => {
if (!axios.isCancel(err)) {
console.error(err);
}
});
return () => controller.abort();
}, []);
Helper axios.isCancel() vam govori kada je otkazivanje bilo planirano tako da ga ne morate tretirati kao grešku. Ovaj obrazac je neophodan za bilo koju komponentu koja dohvaća podatke kada se mounta.
Organiziranje API Poziva sa Servisima
Praćenje API poziva kroz različite dijelove vaše aplikacije može biti izazovno. Service layer obrazac stavlja sve API pozive za resurs u jednu datoteku. Svaki servis exporta funkcije koje komponente mogu koristiti bez znanja kako rade.
// services/users.service.ts
import { api } from '@/config/axios.config';
export default class UsersService {
static async getAll(): Promise<User[]> {
const { data } = await api.get('/users');
return data;
}
static async getById(id: number): Promise<User> {
const { data } = await api.get(`/users/${id}`);
return data;
}
static async create(payload: CreateUserPayload): Promise<User> {
const { data } = await api.post('/users', payload);
return data;
}
static async update(id: number, payload: UpdateUserPayload): Promise<User> {
const { data } = await api.put(`/users/${id}`, payload);
return data;
}
static async delete(id: number): Promise<void> {
await api.delete(`/users/${id}`);
}
}
Komponente uvoze servis i koriste njegove metode. Ova separacija olakšava testiranje, smanjuje dupliciranje koda i daje vam jedno mjesto za ažuriranje kada se API endpointi promijene. Za veće aplikacije obrazac dobro radi s rješenjima za upravljanje stanjem.
Slanje Zahtjeva Paralelno
Možda vam trebaju podaci s više od jednog endpointa prije nego možete renderirati komponentu. S Promise.all možete poslati više zahtjeva istovremeno i čekati da svi završe. Ova metoda je brža od slanja zahtjeva jedan po jedan.
const fetchDashboardData = async () => {
const [usersRes, ordersRes, statsRes] = await Promise.all([api.get('/users'), api.get('/orders'), api.get('/stats')]);
return {
users: usersRes.data,
orders: ordersRes.data,
stats: statsRes.data,
};
};
Ako jedan zahtjev ne uspije, trebali biste koristiti Promise.allSettled umjesto toga. Završava kada su svi promisi ispunjeni, bez obzira jesu li bili uspješni ili ne.
const results = await Promise.allSettled([api.get('/users'), api.get('/orders'), api.get('/stats')]);
const data = {
users: results[0].status === 'fulfilled' ? results[0].value.data : [],
orders: results[1].status === 'fulfilled' ? results[1].value.data : [],
stats: results[2].status === 'fulfilled' ? results[2].value.data : null,
};
Profesionalni razvojni timovi koriste ove obrasce za stvaranje responzivnih sučelja.
Najbolje Prakse
Postoji nekoliko stvari koje možete učiniti da dobijete maksimum od Axiosa u React aplikacijama.
Uvijek kreirajte konfiguriranu instancu umjesto korištenja defaultnog Axiosa. Ovo drži vaše headere i base URL zajedno. Stavite konfiguracijske vrijednosti u environment varijable tako da ih možete mijenjati bez promjene koda.
Otkažite zahtjeve kada se komponente unmountaju. Ovo zaustavlja curenje memorije i upozorenja u konzoli o ažuriranju komponenti koje nisu mountane. Svatko tko piše kod za dohvaćanje podataka trebao bi moći koristiti AbortController obrazac bez razmišljanja.
Rukujte greškama na svakoj razini. Interceptori hvataju probleme koji utječu na sve, poput neuspjelih prijava. Pojedinačni zahtjevi bi i dalje trebali imati try-catch blokove za rukovanje određenim vrstama grešaka i pružanje povratnih informacija korisnicima.
Organizirajte API pozive u service datoteke kako vaša aplikacija raste. Ovaj obrazac smanjuje duplicirani kod i olakšava snalaženje u bazi koda. Trebate ažurirati samo jednu datoteku kada se endpoint promijeni umjesto pregledavanja svih komponenti.
Nemojte hardkodirati URL-ove. Environment varijable čine vašu aplikaciju fleksibilnijom i sprječavaju vas da slučajno šaljete zahtjeve na pogrešne servere.
Kada Odabrati Axios Umjesto Fetcha
Axios je odličan kada trebate interceptore, automatsko JSON rukovanje ili način otkazivanja zahtjeva s čišćom sintaksom. Biblioteka se brine o boilerplate kodu koji fetch treba, tako da se možete fokusirati na ono što je bitno.
Fetch je u redu za jednostavne aplikacije koje ne trebaju puno koristiti API. Nema potrebe za instalacijom i ne mijenja veličinu bundlea. Ako trebate samo povremene zahtjeve i ne trebate napredne funkcije, fetch može biti dovoljan.
Većina profesionalnih projekata ima koristi od Axiosa jer jednostavnost korištenja nadmašuje malo povećanje veličine bundlea. Axios je preporučena opcija za izgradnju aplikacija koje trebaju snažnu API komunikaciju. Dobro je radio na mnogim klijentskim projektima i još uvijek se aktivno održava.
