Axios: vad är det, HTTP-förfrågningar och grunderna i att arbeta med API

Vad är Axios?

Axios är ett JavaScript-bibliotek för att utföra HTTP-förfrågningar från webbläsaren och Node.js-miljön. Det är byggt ovanpå XMLHttpRequest i webbläsaren och http-modulen i Node.js och tillhandahåller ett enhetligt API för båda plattformarna.

Den största fördelen med Axios jämfört med inbyggd fetch är automatisk JSON-bearbetning, stöd för interceptorer och bekvämare felhantering. Till skillnad från fetch kräver Axios inte två .then-anrop för att få JSON-svaret och kastar automatiskt ett undantag vid HTTP-fel (4xx, 5xx).

Biblioteket stöder alla viktiga HTTP-metoder: GET, POST, PUT, DELETE, PATCH och HEAD. Det kan användas både i enkla projekt och i stora företagsapplikationer med hundratusentals förfrågningar dagligen.

Nyckelegenskaper hos Axios

• Promise API — alla operationer returnerar Promise, vilket förenklar asynkron kod
• TypeScript-stöd — full typning för alla metoder och konfigurationer
• Interceptorer — middleware för bearbetning av förfrågningar och svar
• Transformation — automatisk konvertering av data vid in- och utmatning

Axios arkitektur och funktionsprincip

Axios arkitektur bygger på konceptet med adaptrar (adapters). Biblioteket abstraherar transportlagret: i webbläsaren används XMLHttpRequest, i Node.js — http- eller https-modulen. Detta möjliggör ett enhetligt gränssnitt oavsett körningsmiljö.

Varje förfrågan går genom en kedja av interceptorer som kan ändra konfigurationen av förfrågan eller svaret. Efter interceptorerna skickas förfrågan till adaptern som utför det faktiska HTTP-anropet. Svaret går sedan genom svarsinterceptorerna innan det når applikationskoden.

Livscykel för en Axios-förfrågan

1. Skapa konfiguration — metod, URL, rubriker, förfrågans brödtext
2. Begäran interceptor — ändra konfiguration, lägga till token
3. HTTP-anrop — utförande via webbläsar- eller Node.js-adapter
4. Svar interceptor — transformera svar, hantera fel
5. Returnera resultat — Promise löses med data eller avvisas

Axios huvudfunktioner

Axios innehåller många inbyggda funktioner som gör det till ett bekvämt val för att arbeta med HTTP i mobil- och webbapplikationer. Låt oss titta på de viktigaste.

Automatisk datatransformation

När en förfrågan skickas konverterar Axios automatiskt ett JavaScript-objekt till en JSON-sträng med hjälp av JSON.stringify. När ett svar tas emot parsar biblioteket tillbaka JSON till ett objekt. Detta befriar utvecklaren från manuell serialisering och deserialisering av data.

CSRF-skydd

I webbläsarmiljön lägger Axios automatiskt till XSRF-TOKEN-rubriker från cookie, vilket skyddar applikationen mot förfalskning av begäranden mellan webbplatser. För detta räcker det att konfigurera servern att skicka token i en cookie med namnet XSRF-TOKEN.

Timeout och avbryta förfrågningar

Biblioteket stöder inställning av timeout via parametern timeout och avbrytande av förfrågan via AbortController. Detta är särskilt viktigt i mobilapplikationer med instabil anslutning, där fastnade förfrågningar förbrukar batteri och data.

Installera och konfigurera Axios

Installation av Axios görs via vilken pakethanterare som helst. Biblioteket finns i npm-registret och kan anslutas både i Node.js och i webbläsarprojekt. För TypeScript ingår typerna i huvudpaketet, inga ytterligare beroenden krävs.

Efter installation kan du skapa en instans med grundkonfiguration: bas-URL, standard timeout, gemensamma rubriker. Detta gör att du inte behöver upprepa samma parametrar i varje förfrågan och centralt hantera HTTP-klientens inställningar.

# Installation via npm
npm install axios

# Installation via yarn
yarn add axios

# Installation via pnpm
pnpm add axios

Skapa en instans med konfiguration

Det rekommenderas att skapa en separat Axios-instans för varje API-tjänst. Detta gör det möjligt att ställa in bas-URL, standardrubriker och timeout som kommer att tillämpas på alla förfrågningar från denna instans utan upprepning i varje anrop.

import axios from 'axios';

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

Kodexempel med Axios

Exempel på förfrågningar visar de viktigaste användningsmönstren för Axios. Alla exempel använder async/await-syntax som gör asynkron kod mer läsbar jämfört med .then()-kedjor.

GET-förfrågan med parametrar

För att hämta data från servern används metoden axios.get. Frågeparametrar skickas via params-objektet, som automatiskt omvandlas till en query-sträng. Svaret innehåller data i fältet data, status i status och rubriker i 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('Fel vid laddning av användare', error);
    throw error;
  }
}

POST-förfrågan med brödtext

För att skicka data till servern används axios.post. Det andra argumentet är ett objekt med data som Axios automatiskt serialiserar till JSON. Innehållstypen Content-Type är som standard inställd på 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;
}

Interceptorer

Interceptorer är middleware-funktioner som körs för varje förfrågan eller svar. De gör det möjligt att lägga till auktoriseringstoken, logga förfrågningar och centralt hantera fel. Begäran-interceptorn lägger till Authorization-rubriken med en token från lagringen.

// Begäran-interceptor — lägger till auktoriseringstoken
api.interceptors.request.use(
  (config) => {
    const token = getToken();
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => Promise.reject(error)
);

// Svar-interceptor — hanterar 401-fel
api.interceptors.response.use(
  (response) => response,
  (error) => {
    if (error.response?.status === 401) {
      redirectToLogin();
    }
    return Promise.reject(error);
  }
);

Felhantering i Axios

Felhantering i Axios bygger på undantagsmekanismen. Till skillnad från fetch fångar Axios automatiskt HTTP-fel (4xx, 5xx) och skickar dem till catch-blocket. Felobjektet innehåller information om serverns svar, förfrågan och körningskontext.

Det är viktigt att skilja mellan tre typer av fel: server svarsfel (response), förfrågefel (request) och konfigurationsfel (config). Det första uppstår vid ett framgångsrikt HTTP-anrop med felkod, det andra — när det inte finns något svar från servern, det tredje — vid felaktig konfiguration av förfrågan.

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('Svarfel', error.response.status);
      } else if (error.request) {
        console.warn('Inget svar från servern');
      } else {
        console.warn('Konfigurationsfel');
      }
    }
  }
}

Jämförelse av Axios med Fetch API

Jämförelse av Axios med det inbyggda Fetch API hjälper till att förstå när varje teknik är lämplig. Fetch är ett inbyggt webbläsar-API som inte kräver installation. Axios är ett tredjepartsbibliotek med ytterligare funktioner. För enkla förfrågningar räcker fetch, för komplexa applikationer med interceptorer och centraliserad felhantering är Axios bekvämare.

Fetch betraktar inte HTTP-fel (4xx, 5xx) som undantag — du måste kontrollera response.ok. Fetch kräver två .then()-anrop för att få JSON: response.json() returnerar sedan ett Promise med data. Axios gör detta automatiskt. Fetch stöder inte filuppladdningsförlopp utan ytterligare polyfill. Axios har inbyggda onUploadProgress och onDownloadProgress.

I Node.js är Fetch tillgängligt från version 18 som en experimentell funktion, medan Axios fungerar stabilt från Node.js 10. För projekt som stöder äldre Node.js-versioner är valet uppenbart till förmån för Axios. För moderna webbläsarprojekt utan komplex förfrågehantering kan fetch vara tillräckligt.