AXIOS con React

15 Set 2023
Staff

React si è affermato come uno dei principali framework JavaScript per lo sviluppo di applicazioni web moderne. Una delle operazioni più comuni nello sviluppo di applicazioni React è gestire le chiamate API per recuperare i dati da server esterni o interagire con risorse remote. A questo scopo, AXIOS si è dimostrato uno strumento estremamente potente ed efficace.

In questo articolo, esploriamo come sfruttare al meglio AXIOS con React per ottimizzare le chiamate API e migliorare le performance delle nostre applicazioni.

Cos'è AXIOS?

AXIOS è una libreria JavaScript per la gestione delle richieste HTTP basata su promise. È un tool ampiamente utilizzato nel mondo di React e tra le altre librerie JavaScript per effettuare chiamate API in modo asincrono. AXIOS offre una sintassi semplice e intuitiva per effettuare richieste GET, POST, PUT, DELETE e altre operazioni HTTP, rendendo la comunicazione con i server agevole.

Configurare AXIOS in un progetto React

Prima di poter utilizzare AXIOS in un progetto React, è necessario installarlo - si può procedere eseguendo il seguente comando:

npm install axios

Una volta installato AXIOS, si passa alla sua configurazione così da utilizzarlo nell’intero progetto React - è necessario creare un file di configurazione, ad esempio `axios.js`, e inserire il seguente codice:


import axios from 'axios';

const instance = axios.create({
    baseURL: 'https://api.example.com', // Sostituisci con l'URL della tua API
    timeout: 10000, // Imposta il timeout delle richieste (opzionale)
    headers: {
        'Content-Type': 'application/json',
    },
});

export default instance;

Ora puoi importare questa istanza di AXIOS in qualsiasi parte del tuo progetto React e utilizzarla per effettuare chiamate API!


import axios from './axios';

axios.get('/endpoint')
    .then(response => {
    // Gestisci la risposta qui
    })
    .catch(error => {
    // Gestisci l'errore qui
});

Gestire le Chiamate API in Componenti React

Al fine di massimizzare l'utilizzo di AXIOS in concomitanza con il framework React, è cruciale acquisire una comprensione approfondita del processo di gestione delle richieste API all'interno dei componenti React. Tali richieste vengono spesso inoltrate direttamente dai componenti React - l'impiego di AXIOS semplifica tale procedura.

Supponiamo di avere un componente React che deve recuperare una lista di utenti da un'API. Ecco come potrebbe apparire il codice:


import React, { useEffect, useState } from 'react';
import axios from './axios';

function UserList() {
    const [users, setUsers] = useState([]);
    
    useEffect(() => {
        axios.get('/users')
        .then(response => {
            setUsers(response.data);
        })
        .catch(error => {
            console.error('Errore nella richiesta API:', error);
        });
    }, []);
    
    return (
        <div>
            <h1>Lista Utenti</h1>
            <ul>
                {users.map(user => (
                <li key={user.id}>{user.name}</li>
                ))}
            </ul>
        </div>
    );
}

export default UserList;

In questo esempio, utilizziamo l'hook `useEffect` per effettuare la chiamata API quando il componente viene montato. Una volta ricevuti i dati dalla chiamata API, li immagazziniamo nello stato del componente utilizzando `useState`, consentendo al componente di renderizzare dinamicamente la lista degli utenti.

Hai bisogno di aiuto per il tuo progetto? Clicca qui

Gestione efficace degli errori

La gestione degli errori costituisce un aspetto molto importante nell'ambito delle chiamate API. AXIOS agevola questo processo attraverso la fornitura del blocco `catch` nell'oggetto promise. Tuttavia, è imprescindibile attuare una gestione degli errori di carattere efficiente, con l'obiettivo di migliorare l'esperienza dell'utente.

Un modo per farlo è mostrare un messaggio di errore all'utente quando si verifica un errore. Ad esempio:


import React, { useEffect, useState } from 'react';
import axios from './axios';

function UserList() {
    const [users, setUsers] = useState([]);
    const [error, setError] = useState(null);
    
    useEffect(() => {
        axios.get('/users')
        .then(response => {
            setUsers(response.data);
        })
        .catch(error => {
            setError(error);
        });
    }, []);
    
    if (error) {
        return <div>Si è verificato un errore: {error.message}</div>;
    }
    
    return (
        <div>
            <h1>Lista Utenti</h1>
            <ul>
                {users.map(user => (
                <li key={user.id}>{user.name}</li>
                ))}
            </ul>
        </div>
    );
}

export default UserList;

In questo esempio, abbiamo aggiunto uno stato `error` per memorizzare l'errore e lo mostriamo all'utente quando si verifica un errore.

Ottimizzazione delle chiamate API con interceptor

AXIOS mette a disposizione la possibilità di adoperare interceptor (o intercettori) allo scopo di amministrare in maniera centralizzata le richieste e le risposte relative alle chiamate API. Gli interceptor consentono l'implementazione di logiche personalizzate prima dell'invio di una richiesta o successivamente alla ricezione di una risposta.

Un'applicazione comune degli intercettori consiste nell'inclusione di un token di autenticazione all'interno delle richieste. Ad esempio, se si dispone di un token JWT che deve essere conglobato in ciascuna richiesta, ciò può essere agevolmente effettuato mediante un interceptor operante in modo centralizzato.


import axios from 'axios';

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

instance.interceptors.request.use(config => {
    // Aggiungi il token JWT alle richieste se l'utente è autenticato
    const authToken = localStorage.getItem('authToken');
    if (authToken) {
        config.headers.Authorization = 'Bearer authToken';
    }
        return config;
    }, error => {
        return Promise.reject(error);
    });

export default instance;

In questo esempio, utilizziamo un interceptor per aggiungere il token JWT alle richieste se l'utente è autenticato. Questo evita la necessità di aggiungere manualmente il token in ogni chiamata API.

AXIOS è uno strumento potente e flessibile per la gestione delle chiamate API in applicazioni React. Sfruttando AXIOS in modo efficace, è possibile semplificare la comunicazione con le risorse remote, gestire gli errori in modo adeguato e ottimizzare le chiamate API per migliorare le performance complessive delle applicazioni.

Se sei interessato a conoscere più approfonditamente AXIOS per ottimizzare i tuoi progetti React, contattaci e prenota una consulenza con il nostro team - ti guideremo verso le soluzioni più adatte al tuo business e verso una gestione avanzata delle chiamate API.