Axios: шта је то, HTTP захтеви и основе рада са API

Шта је Axios?

Axios је JavaScript библиотека за извршавање HTTP захтева из прегледача и Node.js окружења. Изграђена је на XMLHttpRequest у прегледачу и http модула у Node.js, пружајући јединствени API за обе платформе.

Главна предност Axios-а у односу на изворни fetch је аутоматска обрада JSON-а, подршка за пресретаче и згоднији рад са грешкама. За разлику од fetch-а, Axios не захтева два позива .then за добијање JSON тела одговора и аутоматски баца изузетак при HTTP грешкама (4xx, 5xx).

Библиотека подржава све главне HTTP методе: GET, POST, PUT, DELETE, PATCH и HEAD. Може се користити како у једноставним пројектима, тако и у великим корпоративним апликацијама са стотинама хиљада захтева дневно.

Кључне карактеристике Axios-а

• Promise API — све операције враћају Promise, што поједностављује асинхрони код
• Подршка за TypeScript — потпуна типизација за све методе и конфигурације
• Пресретачи — middleware за обраду захтева и одговора
• Трансформација — аутоматско претварање података на улазу и излазу

Архитектура Axios и принцип рада

Архитектура Axios-а се заснива на концепту адаптера (adapters). Библиотека апстрахује транспортни слој: у прегледачу се користи XMLHttpRequest, у Node.js — http или https модул. То омогућава јединствени интерфејс без обзира на окружење извршавања.

Сваки захтев пролази кроз ланац пресретача (interceptors) који могу модификовати конфигурацију захтева или одговора. Након пресретача, захтев се прослеђује адаптеру који извршава стварни HTTP позив. Одговор затим пролази кроз пресретаче одговора пре него што стигне до кода апликације.

Животни циклус захтева Axios-а

1. Креирање конфигурације — метод, URL, заглавља, тело захтева
2. Пресретач захтева — модификација конфигурације, додавање токена
3. HTTP позив — извршавање преко адаптера прегледача или Node.js
4. Пресретач одговора — трансформација одговора, обрада грешака
5. Враћање резултата — Promise се решава са подацима или одбија

Основне могућности Axios-а

Axios укључује бројне уграђене могућности које га чине згодним избором за рад са HTTP-ом у мобилним и веб апликацијама. Размотримо најважније од њих.

Аутоматска трансформација података

Приликом слања захтева, Axios аутоматски претвара JavaScript објекат у JSON низ помоћу JSON.stringify. При пријему одговора, библиотека парсира JSON назад у објекат. То ослобађа програмера ручне серијализације и десеријализације података.

Заштита од CSRF

У прегледачком окружењу, Axios аутоматски додаје заглавља XSRF-TOKEN из колачића, штитећи апликацију од међусајтског фалсификовања захтева. За то је довољно конфигурисати сервер да шаље токен у колачићу под именом XSRF-TOKEN.

Тајмаути и отказивање захтева

Библиотека подржава постављање тајмаута кроз параметар timeout и отказивање захтева преко AbortController. Ово је посебно важно у мобилним апликацијама са нестабилном везом, где заглављени захтеви троше батерију и саобраћај.

Инсталација и подешавање Axios-а

Инсталација Axios-а се врши преко било ког менаџера пакета. Библиотека је доступна у npm регистру и може се повезати како у Node.js, тако и у прегледачким пројектима. За TypeScript, типови су укључени у главни пакет, додатне зависности нису потребне.

Након инсталације можете креирати инстанцу са основном конфигурацијом: основни URL, подразумевани тајмаут, заједничка заглавља. То омогућава да не понављате исте параметре у сваком захтеву и централизовано управљате подешавањима HTTP клијента.

# Инсталација преко npm
npm install axios

# Инсталација преко yarn
yarn add axios

# Инсталација преко pnpm
pnpm add axios

Креирање инстанце са конфигурацијом

Препоручује се креирање засебне инстанце Axios-а за сваки API сервис. То омогућава постављање основног URL-а, стандардних заглавља и тајмаута који ће се примењивати на све захтеве ове инстанце без понављања у сваком позиву.

import axios from 'axios';

const api = axios.create({
  baseURL: 'https://api.example.com/v1',
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json',
    'Accept': 'application/json'
  }
});

Примери кода са Axios

Примери захтева показују основне обрасце коришћења Axios-а. Сви примери користе async/await синтаксу која чини асинхрони код читљивијим у поређењу са .then() ланцима.

GET захтев са параметрима

За добијање података са сервера користи се метод axios.get. Параметри захтева се прослеђују кроз објекат params, који се аутоматски претвара у query-string. Одговор садржи податке у пољу data, статус у status и заглавља у headers.

interface User {
  id: number;
  name: string;
  email: string;
}

async function getUsers() {
  try {
    const response = await api.get<User[]>('/users', {
      params: { page: 1, limit: 10 }
    });
    return response.data;
  } catch (error) {
    console.error('Грешка при учитавању корисника', error);
    throw error;
  }
}

POST захтев са телом

За слање података на сервер користи се axios.post. Други аргумент је објекат са подацима које Axios аутоматски серијализује у JSON. Тип садржаја Content-Type се подразумевано поставља на application/json.

interface CreateUserDto {
  name: string;
  email: string;
  role: string;
}

async function createUser(data: CreateUserDto) {
  const response = await api.post<User>('/users', data);
  return response.data;
}

Пресретачи (Interceptors)

Пресретачи су middleware функције које се извршавају за сваки захтев или одговор. Омогућавају додавање токена за ауторизацију, евидентирање захтева, централизовану обраду грешака. Пресретач захтева додаје заглавље Authorization са токеном преузетим из складишта.

// Пресретач захтева — додаје токен за ауторизацију
api.interceptors.request.use(
  (config) => {
    const token = getToken();
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => Promise.reject(error)
);

// Пресретач одговора — обрађује 401 грешке
api.interceptors.response.use(
  (response) => response,
  (error) => {
    if (error.response?.status === 401) {
      redirectToLogin();
    }
    return Promise.reject(error);
  }
);

Обрада грешака у Axios

Обрада грешака у Axios-у се заснива на механизму изузетака. За разлику од fetch-а, Axios аутоматски хвата HTTP грешке (4xx, 5xx) и прослеђује их у catch блок. Објекат грешке садржи информације о одговору сервера, захтеву и контексту извршавања.

Важно је разликовати три типа грешака: грешка одговора сервера (response), грешка захтева (request) и грешка конфигурације (config). Прва настаје при успешном извршењу HTTP позива са кодом грешке, друга — при недостатку одговора од сервера, трећа — при неправилној конфигурацији захтева.

import axios, { AxiosError } from 'axios';

async function safeRequest() {
  try {
    return await api.get('/data');
  } catch (error) {
    if (error instanceof AxiosError) {
      if (error.response) {
        console.warn('Грешка одговора', error.response.status);
      } else if (error.request) {
        console.warn('Нема одговора од сервера');
      } else {
        console.warn('Грешка конфигурације');
      }
    }
  }
}

Поређење Axios-а са Fetch API

Поређење Axios-а са изворним Fetch API-јем помаже да се разуме када је свака технологија прикладна. Fetch је уграђени API прегледача који не захтева инсталацију. Axios је библиотека треће стране са додатним могућностима. За једноставне захтеве довољан је fetch, за сложене апликације са пресретачима и централизованом обрадом грешака згоднији је Axios.

Fetch не сматра HTTP грешке (4xx, 5xx) изузецима — потребно је проверити response.ok. Fetch захтева два позива .then() за добијање JSON-а: response.json() затим враћа Promise са подацима. Axios то ради аутоматски. Fetch не подржава напредак отпремања датотека без додатног полифила. Axios има уграђене onUploadProgress и onDownloadProgress.

У Node.js-у, Fetch је доступан од верзије 18 као експериментална функција, а Axios ради стабилно од Node.js 10. За пројекте који подржавају старије верзије Node.js-а, избор је очигледан у корист Axios-а. За модерне прегледачке пројекте без сложене обраде захтева, fetch може бити довољан.