Frontend Academy · Lezione

Axios: interceptor e URL di base

Creare un’istanza Axios con un baseURL, aggiungere i token di autenticazione negli interceptor delle richieste e gestire gli errori 4xx/5xx negli interceptor delle risposte.

Axios: interceptor e URL di base è una lezione Frontend Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Frontend Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Frontend Academy include 4 lezioni in totale.

Perché utilizzare Axios?

Axios è un client HTTP molto diffuso basato su XMLHttpRequest. Offre funzionalità aggiuntive: gestione automatica del JSON, interceptor per richieste e risposte, configurazione di baseURL, timeout e token per l'annullamento delle richieste. Molti team lo preferiscono ancora a fetch.

Installazione di Axios

Lo installi tramite npm. Il bundle per il browser occupa circa 14 KB in formato gzippato.

npm install axios

GET e POST di base

Axios converte automaticamente in stringa i corpi JSON e analizza automaticamente le risposte JSON: non sono necessarie chiamate manuali a JSON.stringify o .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);

Creazione di un'istanza Axios

Crei un'istanza configurata per la sua API, così evita di ripetere URL di base, header e timeout in ogni chiamata.

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' });

Interceptor della richiesta: token di autenticazione

Inserisca il token di autenticazione in ogni richiesta senza ripetere il codice.

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

Interceptor della risposta: errori globali

Centralizzi la gestione degli errori per tutte le risposte: reindirizzi l'utente in caso di 401, mostri una notifica toast in caso di 5xx e così via.

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);
  }
);

Aggiornamento del token in caso di 401

Utilizzi un interceptor della risposta per rilevare il codice 401, aggiornare il token e riprovare automaticamente la richiesta originale.

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);
});

Parametri URL e query

Axios accetta un oggetto params e lo serializza automaticamente in una stringa di query.

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

Timeout

Imposti un timeout per la richiesta, così eviterà che resti bloccata a causa di un server lento.

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

Annullamento delle richieste

Utilizzi AbortController (Axios moderno) oppure un CancelToken (API precedente).

const controller = new AbortController();

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

controller.abort();

Struttura dell'oggetto errore

Gli errori di Axios hanno error.response (il server ha risposto con uno status di errore), error.request (non è stata ricevuta alcuna risposta) oppure nessuno dei due (la configurazione della richiesta non è riuscita).

Axios o Fetch — quale scegliere

Axios: API più semplice, interceptor integrati e gestione degli errori più essenziale. Fetch: nativo, bundle più piccolo e supporto moderno allo streaming. Nei nuovi progetti si sceglie spesso fetch + un wrapper sottile; i progetti esistenti basati su Axios raramente migrano.

Verifica rapida

Quale funzionalità di Axios consente di aggiungere un header Authorization a ogni richiesta senza modificare singolarmente ogni chiamata?

Riepilogo: Axios

Utilizzi axios.create() per creare istanze configurate con baseURL e timeout. Le risposte JSON vengono analizzate automaticamente (res.data). Gli interceptor delle richieste aggiungono i token; quelli delle risposte gestiscono gli errori e aggiornano i token. Utilizzi l'oggetto params per le stringhe di query e AbortController per l'annullamento. Scelga Axios per la semplicità; scelga fetch + un wrapper per un bundle più piccolo.

Domande Frequenti

La lezione «Axios: interceptor e URL di base» è gratuita?

Sì — il testo completo di «Axios: interceptor e URL di base» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Frontend Academy, passa a CoddyKit PRO. Il corso Frontend Academy include 4 lezioni in totale.

Cosa imparerò in «Axios: interceptor e URL di base»?

Creare un’istanza Axios con un baseURL, aggiungere i token di autenticazione negli interceptor delle richieste e gestire gli errori 4xx/5xx negli interceptor delle risposte. Eserciti Frontend Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Frontend Academy?

Non è richiesta alcuna esperienza precedente. Frontend Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.

Quanto tempo richiede la lezione «Axios: interceptor e URL di base»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Frontend Academy?

Sì. Ogni lezione Frontend Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

Fetch API: GET, POST, PUT e DELETE
Axios: interceptor e URL di base
Gestione degli errori: codici di stato HTTP
SWR e React Query per la memorizzazione nella cache dei dati

← Torna a Frontend Academy