Frontend Academy · Lektion

Axios: interceptors og base URL

Opret en Axios-instans med en baseURL, tilføj auth-tokens i request-interceptors, og håndtér 4xx/5xx-fejl i response-interceptors.

Lektion 2 af 414 trin

Axios: interceptors og base URL er en gratis Frontend Academy-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Frontend Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Frontend Academy-kurset indeholder 4 lektioner i alt.

Hvorfor bruge Axios?

Axios er en populær HTTP-klient, der er bygget oven på XMLHttpRequest. Den tilføjer automatisk JSON-håndtering, interceptorer for anmodninger og svar, baseURL-konfiguration, en tidsgrænse og tokens til annullering af anmodninger. Mange udviklingsteams foretrækker stadig Axios frem for fetch.

Installation af Axios

Installér via npm. Browserpakken fylder omkring 14 KB gzip-komprimeret.

npm install axios

Grundlæggende GET og POST

Axios konverterer automatisk JSON-kroppe til strenge og fortolker automatisk JSON-svar — du behøver ikke selv at kalde JSON.stringify eller .json().

import axios from 'axios';

const { data } = await axios.get('/api/users');
console.log(data); // already parsed

const res = await axios.post('/api/users', { name: 'Alice' });
console.log(res.data, res.status);

Opret en Axios-instans

Opret en konfigureret instans til din API for at undgå at gentage basis-URL, headers og tidsgrænse ved hvert kald.

import axios from 'axios';

export const api = axios.create({
  baseURL: import.meta.env.VITE_API_URL,
  timeout: 10000,
  headers: { 'Content-Type': 'application/json' }
});

// Use it:
const { data } = await api.get('/users');
const res = await api.post('/users', { name: 'Alice' });

Request-interceptor: godkendelsestoken

Indsæt godkendelsestokenet i hver anmodning uden at gentage koden.

api.interceptors.request.use((config) => {
  const token = localStorage.getItem('token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

Response-interceptor: globale fejl

Centralisér fejlhåndteringen for alle svar: omdirigér ved 401, vis en notifikation ved 5xx osv.

api.interceptors.response.use(
  (response) => response,
  (error) => {
    if (error.response?.status === 401) {
      window.location.href = '/login';
    }
    if (error.response?.status >= 500) {
      toast.error('Server error. Please try again.');
    }
    return Promise.reject(error);
  }
);

Opdater token ved 401

Brug en response-interceptor til at registrere 401, opdatere tokenet og gennemsigtigt gentage den oprindelige anmodning.

api.interceptors.response.use(null, async (error) => {
  const originalRequest = error.config;
  if (error.response?.status === 401 && !originalRequest._retry) {
    originalRequest._retry = true;
    const newToken = await refreshToken();
    localStorage.setItem('token', newToken);
    originalRequest.headers.Authorization = `Bearer ${newToken}`;
    return api(originalRequest); // retry
  }
  return Promise.reject(error);
});

URL-parametre og forespørgsel

Axios accepterer et params-objekt — det serialiseres automatisk til en forespørgselsstreng.

const { data } = await api.get('/search', {
  params: { q: 'react hooks', page: 2 }
});
// GET /search?q=react+hooks&page=2

Tidsgrænser

Angiv en tidsgrænse for en forespørgsel for at undgå at hænge på en langsom server.

api.get('/slow-endpoint', { timeout: 5000 })
  .catch(err => {
    if (err.code === 'ECONNABORTED') {
      console.log('Request took too long');
    }
  });

Annullering af forespørgsler

Brug AbortController (moderne Axios) eller et CancelToken (ældre API).

const controller = new AbortController();

api.get('/big-data', { signal: controller.signal })
  .catch(err => {
    if (axios.isCancel(err)) console.log('cancelled');
  });

controller.abort();

Fejlobjektets struktur

Axios-fejl har error.response (serveren svarede med en fejlstatus), error.request (intet svar blev modtaget) eller ingen af delene (opsætningen af forespørgslen mislykkedes).

Axios vs. Fetch — Hvornår skal du vælge

Axios: renere API, indbyggede interceptorer og enklere fejlhåndtering. Fetch: indbygget, mindre pakke og moderne understøttelse af streaming. Nye projekter vælger ofte fetch + en tynd indpakning; eksisterende Axios-projekter migrerer sjældent.

Hurtigt tjek

Hvilken funktion i Axios giver dig mulighed for at føje en Authorization-header til hver eneste forespørgsel uden at ændre hvert enkelt kald?

Besvar den i den interaktive lektion

Opsummering: Axios

axios.create() til konfigurerede instanser med baseURL og timeout. JSON-svar fortolkes automatisk (res.data). Forespørgselsinterceptorer tilføjer tokens; svarinterceptorer håndterer fejl og fornyer tokens. params-objekt til forespørgselsstrenge. AbortController til annullering. Vælg Axios for en renere løsning; fetch + indpakning for en mindre pakke.

Gratis at komme i gang

Lær HTML med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 41
Lektioner: 163

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Axios: interceptors og base URL” gratis?

Ja — hele teksten til “Axios: interceptors og base URL” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Frontend Academy-kurset, skal du opgradere til CoddyKit PRO. Frontend Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Axios: interceptors og base URL”?

Opret en Axios-instans med en baseURL, tilføj auth-tokens i request-interceptors, og håndtér 4xx/5xx-fejl i response-interceptors. Du øver dig i Frontend Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Frontend Academy?

Der kræves ingen tidligere erfaring. Frontend Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.

Hvor lang tid tager lektionen “Axios: interceptors og base URL”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Frontend Academy-lektion?

Ja. Alle Frontend Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

← Tilbage til Frontend Academy