Come usare Axios in React

Introduzione

Molte applicazioni sul web hanno bisogno di interfacciarsi con una REST API in una qualche fase del loro sviluppo. Axios è un client HTTP leggero basato sul servizio $http di Angular.js v1.x ed è molto simile alla Fetch API nativa di JavaScript.

Axios si basa sulle promise, dandoci la possibilità di sfruttare i vantaggi delle keyword async e await di JavaScript per costruire un codice asincrono in semplicità.

Possiamo anche intercettare e cancellare richieste, e c'è una protezione lato client contro la falsificazione delle richieste tra siti (cross-site).

In questo tutorial analizzeremo alcuni esempi di come Axios può essere utilizzato in React per ottenere dati da JSON Placeholder, una nota API a scopo esemplificativo.

Prerequisiti

Per seguire questo tutorial avrai bisogno di:

Node.js aggiornato almeno alla versione 10.16.0 installato sul tuo computer.
Un nuovo progetto React creato utilizzando Create React App.
Le conoscenze di base di JavaScript, HTML e CSS.

Aggiungere Axios al Progetto

La prima cosa da fare è ovviamente creare un nuovo progetto React utilizzando Create React App:

npx create-react-app tutoria-axios-react

Ora navighiamo all'interno della cartella del progetto appena creata:

cd tutorial-axios-react

Installiamo quindi Axios eseguendo il seguente comando:

npm install axios

A questo punto possiamo importare Axios nel file del nostro progetto in cui desideriamo utilizzarlo.

Fare una richiesta `GET` con Axios

In questo primo esempio vedremo come creare un nuovo componente importare Axios per effettuare una richiesta GET.

All'interno del nostro progetto andremo a creare un componente chiamato ListaUtenti.

Andiamo come prima cosa a creare una cartella chiamata components all'interno della cartella src nel nostro progetto:

mkdir src/components

In questa cartella possiamo creare un file chiamato ListaUtenti.js e inserire al suo interno il seguente codice:

import React from 'react';
import axios from 'axios';

export default class ListaUtenti extends React.Component {
  state = {
    persone: []
  }

  componentDidMount() {
    axios.get(`https://jsonplaceholder.typicode.com/users`)
      .then(res => {
        const persone = res.data;
        this.setState({ persone });
      })
  }

  render() {
    return (
      <ul>
        {
          this.state.persone
            .map(persona =>
              <li key={persona.id}>{persona.name}</li>
            )
        }
      </ul>
    )
  }
}

Analizzando ora il codice vediamo innanzitutto che abbiamo importato come prima cosa React e Axios, per poterli utilizzare entrambi nel nostro componente. Poi all'interno dell'hook componentDidMount() andiamo ad effettuare la nostra richiesta GET.

Utilizziamo il metodo axios.get(url) fornendo l'URL dell'endpoint della nostra API per ottenere una promise che restituisce un oggetto di risposta (res). All'interno di questo oggetto abbiamo i nostri dati (res.data) che andiamo ad assegnare alla costante persone.

Oltre ai dati possiamo ottenere altre informazioni come il codice di stato della richiesta con res.status oppure ulteriori informazioni sulla richiesta vera e propria con res.request.

Apriamo ora il file App.js e all'interno di esso aggiungiamo il nostro nuovo componente:

import ListaUtenti from './components/ListaUtenti.js';

function App() {
  return (
    <div ClassName="App">
      <ListaUtenti />
    </div>
  )
}

Poi avviamo l'applicazione:

npm start

Se andiamo ad aprire l'applicazione nel browser dovremmo vedere una lista con 10 nomi di utenti che abbiamo preso da JSON Placeholder.

Fare una Richiesta `POST` con Axios

Vediamo ora come effettuare un'altra richiesta HTTP con Axios, usando però il metodo POST.

Sempre all'interno della cartella components del nostro progetto, andiamo a creare un file chiamato AggiungiPersona.js.

All'interno del file inseriamo il seguente codice che andrà a creare un form in cui l'utente potrà inserire i dati dell'utente e poi inviarli tramite una richiesta POST all'API.

import React from 'react';
import axios from 'axios';

export default class AggiungiUtente extends React.Component {
  state = {
    nome: ''
  }

  handleChange = event => {
    this.setState({ nome: event.target.value });
  }

  handleSubmit = event => {
    event.preventDefault();

    const user = {
      name: this.state.nome
    };

    axios.post(`https://jsonplaceholder.typicode.com/users`, { user })
      .then(res => {
        console.log(res);
        console.log(res.data);
      })
  }

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <label>
            Nome Utente:
            <input type="text" name="nome" onChange={this.handleChange} />
          </label>
          <button type="submit">Aggiungi</button>
        </form>
      </div>
    )
  }
}

Ogni modifica apportata dall'utente al modulo viene gestita dal metodo handleChange(), che aggiorna lo stato per tenere sempre in memoria quello che l'utente scrive nel campo di input

Quando il modulo viene inviato dall'utente, con la funzione handleSubmit() andiamo a bloccare l'azione predefinita del form e poi effettuiamo la richiesta POST vera e propria con Axios, passando l'oggetto user che abbiamo costruito con l'input dell'utente.

Anche utilizzando POST ci verrà restituito un oggetto di risposta con alcune informazioni che possiamo utilizzare all'interno di un then.

Ora andiamo ad aggiungere questo componente nel nostro file App.js insieme a quello di prima:

import ListaUtenti from './components/ListaUtenti';
import AggiungiUtenti from './components/AggiungiUtenti';

function App() {
  return (
    <div ClassName="App">
      <AggiungiUtenti />
      <ListaUtenti />
    </div>
  )
}

Eseguiamo l'applicazione:

npm start

Osservando l'app nel browser vediamo il modulo per inviare dei dati, e se guardiamo in console al momento dell'invio vedremo la risposta del server alla nostra richiesta POST.

Fare una richiesta `DELETE` con Axios

In questo ultimo esempio vedremo come eliminare elementi, in questo caso un utente, dalla nostra API utilizzando una richiesta DELETE.

Creiamo un nuovo componente all'interno della cartella components nel nostro progetto chiamato RimuoviPersona.js e all'interno del file andiamo ad inserire il seguente codice:

import React from 'react';
import axios from 'axios';

export default class RimuoviUtente extends React.Component {
  state = {
    id: ''
  }

  handleChange = event => {
    this.setState({ id: event.target.value });
  }

  handleSubmit = event => {
    event.preventDefault();

    axios.delete(`https://jsonplaceholder.typicode.com/users/${this.state.id}`)
      .then(res => {
        console.log(res);
        console.log(res.data);
      })
  }

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <label>
            ID Utente:
            <input type="number" name="id" onChange={this.handleChange} />
          </label>
          <button type="submit">Rimuovi Utente</button>
        </form>
      </div>
    )
  }
}

Anche in questo caso l'oggetto res fornisce informazioni relative alla richiesta. Possiamo quindi stamparle in console dopo che il modulo sarà stato inviato.

Andiamo ad aggiungere all'interno di App.js il nostro ultimo componente:

import ListaUtenti from './components/ListaUtenti';
import AggiungiUtenti from './components/AggiungiUtenti';
import RimuoviUtente from './components/RimuoviUtente';

function App() {
  return (
    <div ClassName="App">
      <AggiungiUtenti />
      <ListaUtenti />
      <RimuoviUtente />
    </div>
  )
}

Dopo le modifiche eseguiamo la nostra applicazione:

npm start

Aprendo l'applicazione nel browser vedremo ora un modulo che ci consentirà di rimuovere gli utenti dalla nostra API.

Utilizzare un'Istanza di Base in Axios

Come ultima cosa in questa guida vedremo come utilizzare un'istanza di base per definire un URL e qualsiasi altro elemento di configurazione relativo alle richieste che faremo alla nostra API.

Creiamo innanzitutto un file chiamato api.js ed esportiamo una nuova istanza di axios con alcune impostazioni predefinite:

import axios from 'axios';

export default axios.create({
  baseURL: `https://jsonplaceholder.typicode.com/`
});

Una volta aver configurato questa istanza predefinita, possiamo utilizzarla all'interno degli altri componenti. Per esempio eccome come utilizzare l'istanza in RimuoviUtente:

import React from 'react';

import API from '../api';

export default class RimuoviUtente extends React.Component {
  // ...

  handleSubmit = event => {
    event.preventDefault();

    API.delete(`users/${this.state.id}`)
      .then(res => {
        console.log(res);
        console.log(res.data);
      })
  }

  // ...
}

Dato che abbiamo impostato https://jsonplaceholder.typicode.com/ come URL di base, ora non è più necessario inserirlo manualmente in ogni richiesta che desideriamo effettuare a questa API, ma sarà sufficiente indicare l'endpoint da raggiungere.

Usare `async` e `await` con Axios

Vediamo infine come possiamo utilizzare async e await per la vorare con le promise di Axios in React.

La keyword await può essere utilizzata per risolvere delle promise e restituire il valore, che potrò essere quindi assegnato ad una variabile.

import React from 'react';

import API from '../api';

export default class RimuoviPersona extends React.Component {
  // ...

  handleSubmit = event => {
    event.preventDefault();

    const response = await API.delete(`users/${this.state.id}`);

    console.log(response);
    console.log(response.data);
  }

  // ...
}

In questo esempio abbiamo rimosso .then() e risolviamo la promise con await, salvando il nella costante response.

Conclusione

In questo tutorial abbiamo imparato ad utilizzare Axios all'interno di un'applicazione React per eseguire vari tipi di richieste HTTP e come gestire le rispettive risposte.

Introduzione

Prerequisiti

Aggiungere Axios al Progetto

Fare una richiesta GET con Axios

Fare una Richiesta POST con Axios

Fare una richiesta DELETE con Axios