Axios: co to je, HTTP požadavky a základy práce s API

Co je Axios?

Axios je JavaScriptová knihovna pro provádění HTTP požadavků z prohlížeče a prostředí Node.js. Je postavena na XMLHttpRequest v prohlížeči a http modulu v Node.js a poskytuje jednotné API pro obě platformy.

Hlavní výhoda Axios oproti nativnímu fetch je automatické zpracování JSON, podpora zachycovačů a pohodlnější práce s chybami. Na rozdíl od fetch nevyžaduje Axios dvě volání .then k získání JSON těla odpovědi a automaticky vyhazuje výjimku při HTTP chybách (4xx, 5xx).

Knihovna podporuje všechny hlavní HTTP metody: GET, POST, PUT, DELETE, PATCH a HEAD. Lze ji použít jak v jednoduchých projektech, tak ve velkých podnikových aplikacích se statisíci požadavků denně.

Klíčové vlastnosti Axios

• Promise API — všechny operace vracejí Promise, což zjednodušuje asynchronní kód
• Podpora TypeScript — úplná typizace pro všechny metody a konfigurace
• Zachycovače — middleware pro zpracování požadavků a odpovědí
• Transformace — automatický převod dat na vstupu a výstupu

Architektura Axios a princip fungování

Architektura Axios je založena na konceptu adaptérů (adapters). Knihovna abstrahuje transportní vrstvu: v prohlížeči se používá XMLHttpRequest, v Node.js — modul http nebo https. To umožňuje jednotné rozhraní nezávisle na prostředí běhu.

Každý požadavek prochází řetězcem zachycovačů (interceptors), které mohou měnit konfiguraci požadavku nebo odpovědi. Po zachycovačích je požadavek předán adaptéru, který provádí skutečné HTTP volání. Odpověď pak prochází zachycovači odpovědí, než se dostane do kódu aplikace.

Životní cyklus požadavku Axios

1. Vytvoření konfigurace — metoda, URL, hlavičky, tělo požadavku
2. Zachycovač požadavku — úprava konfigurace, přidání tokenů
3. HTTP volání — provedení přes adaptér prohlížeče nebo Node.js
4. Zachycovač odpovědi — transformace odpovědi, zpracování chyb
5. Vrácení výsledku — Promise je vyřešen s daty nebo zamítnut

Hlavní možnosti Axios

Axios zahrnuje mnoho vestavěných možností, které z něj činí pohodlnou volbu pro práci s HTTP v mobilních a webových aplikacích. Pojďme se podívat na ty nejdůležitější.

Automatická transformace dat

Při odesílání požadavku Axios automaticky převede JavaScriptový objekt na JSON řetězec pomocí JSON.stringify. Při přijetí odpovědi knihovna parsuje JSON zpět na objekt. To zbavuje vývojáře ruční serializace a deserializace dat.

Ochrana proti CSRF

V prohlížečovém prostředí Axios automaticky přidává hlavičky XSRF-TOKEN z cookie, čímž chrání aplikaci před paděláním požadavků mezi weby. K tomu stačí nakonfigurovat server tak, aby odesílal token v cookie s názvem XSRF-TOKEN.

Timeout a rušení požadavků

Knihovna podporuje nastavení timeoutu přes parametr timeout a zrušení požadavku přes AbortController. To je obzvláště důležité v mobilních aplikacích s nestabilním připojením, kde zaseknuté požadavky spotřebovávají baterii a data.

Instalace a konfigurace Axios

Instalace Axios se provádí prostřednictvím libovolného správce balíčků. Knihovna je dostupná v npm registru a lze ji připojit jak v Node.js, tak v prohlížečových projektech. Pro TypeScript jsou typy zahrnuty v hlavním balíčku, nejsou vyžadovány žádné další závislosti.

Po instalaci můžete vytvořit instanci se základní konfigurací: základní URL, výchozí timeout, společné hlavičky. To umožňuje neopakovat stejné parametry v každém požadavku a centrálně spravovat nastavení HTTP klienta.

# Instalace přes npm
npm install axios

# Instalace přes yarn
yarn add axios

# Instalace přes pnpm
pnpm add axios

Vytvoření instance s konfigurací

Doporučuje se vytvořit samostatnou instanci Axios pro každou API službu. To umožňuje nastavit základní URL, standardní hlavičky a timeout, které se použijí na všechny požadavky této instance bez opakování v každém volání.

import axios from 'axios';

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

Příklady kódu s Axios

Příklady požadavků ukazují hlavní vzory použití Axios. Všechny příklady používají syntaxi async/await, která činí asynchronní kód čitelnějším ve srovnání s řetězci .then().

GET požadavek s parametry

Pro získání dat ze serveru se používá metoda axios.get. Parametry požadavku se předávají prostřednictvím objektu params, který se automaticky převede na query-string. Odpověď obsahuje data v poli data, stav v status a hlavičky v 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('Chyba načítání uživatelů', error);
    throw error;
  }
}

POST požadavek s tělem

Pro odeslání dat na server se používá axios.post. Druhým argumentem je objekt s daty, který Axios automaticky serializuje do JSON. Typ obsahu Content-Type je ve výchozím nastavení nastaven na 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;
}

Zachycovače (Interceptors)

Zachycovače jsou middleware funkce, které se spouštějí pro každý požadavek nebo odpověď. Umožňují přidávání autorizačních tokenů, logování požadavků, centrální zpracování chyb. Zachycovač požadavku přidává hlavičku Authorization s tokenem získaným z úložiště.

// Zachycovač požadavku — přidává autorizační token
api.interceptors.request.use(
  (config) => {
    const token = getToken();
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => Promise.reject(error)
);

// Zachycovač odpovědi — zpracovává 401 chyby
api.interceptors.response.use(
  (response) => response,
  (error) => {
    if (error.response?.status === 401) {
      redirectToLogin();
    }
    return Promise.reject(error);
  }
);

Zpracování chyb v Axios

Zpracování chyb v Axios je založeno na mechanismu výjimek. Na rozdíl od fetch Axios automaticky zachycuje HTTP chyby (4xx, 5xx) a předává je do bloku catch. Objekt chyby obsahuje informace o odpovědi serveru, požadavku a kontextu provedení.

Je důležité rozlišovat tři typy chyb: chyba odpovědi serveru (response), chyba požadavku (request) a chyba konfigurace (config). První nastává při úspěšném provedení HTTP volání s chybovým kódem, druhý — při absenci odpovědi od serveru, třetí — při nesprávné konfiguraci požadavku.

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('Chyba odpovědi', error.response.status);
      } else if (error.request) {
        console.warn('Žádná odpověď od serveru');
      } else {
        console.warn('Chyba konfigurace');
      }
    }
  }
}

Srovnání Axios s Fetch API

Srovnání Axios s nativním Fetch API pomáhá pochopit, kdy je každá technologie vhodná. Fetch je vestavěné API prohlížeče, které nevyžaduje instalaci. Axios je knihovna třetí strany s dalšími možnostmi. Pro jednoduché požadavky stačí fetch, pro složité aplikace se zachycovači a centrálním zpracováním chyb je Axios pohodlnější.

Fetch nepovažuje HTTP chyby (4xx, 5xx) za výjimky — je třeba zkontrolovat response.ok. Fetch vyžaduje dvě volání .then() k získání JSON: response.json() pak vrátí Promise s daty. Axios to dělá automaticky. Fetch nepodporuje průběh nahrávání souborů bez dalšího polyfill. Axios má vestavěné onUploadProgress a onDownloadProgress.

V Node.js je Fetch dostupný od verze 18 jako experimentální funkce, zatímco Axios funguje stabilně od Node.js 10. Pro projekty podporující starší verze Node.js je volba jasně ve prospěch Axios. Pro moderní prohlížečové projekty bez složitého zpracování požadavků může fetch stačit.