Effettuare richieste HTTP con Axios e React.js

Introduzione

Axios è una libreria Javascript che permette di connettersi con le API di backend e gestire le richieste effettuate tramite il protocollo HTTP.

Il vantaggio di Axios risiede nel suo essere promise-based, permettendo quindi l'implementazione di codice asincrono. Il codice asincrono permetterà, in una pagina, di caricare più elementi contemporaneamente invece che in maniera sequenziale, snellendo sensibilmente i tempi di caricamento.

Il Promise, su cui si basa Axios, è invece un oggetto di Javascript che permette di completare delle richieste in maniera asincrona, facendole passare da tre stati (in sospeso, soddisfatta, rifiutata).

In questa guida verranno illustrati alcuni esempi su come effettuare richieste HTTP GET e POST asincrone in un'applicazione React.js usando la libreria Axios.

Prerequisiti

Per seguire gli esempi avrai bisogno di aver completato in precedenza alcuni step:

• Avere installato Node.js nella versione 10.16.0
• Aver creato un nuovo progetto con React
• Avere delle conoscenze di base di Javascript.

Se sei pronto, cominciamo allora con il primo passaggio del tutorial.

Aggiungere Axios al tuo progetto

La prima parte consiste nell'installare Axios all'interno del tuo progetto con React.

Questo passaggio risulta essere molto semplice, in quanto ti basterà spostarti nella directory di progetto per poi lanciare il comando di installazione di Axios.

$ cd mysampleproject
$ npm install axios

Importare Axios e implementare una richiesta GET

Ora, sarà sufficiente integrare l'importazione di Axios all'interno di un file di codice.

Inizia creando un file .js :

$nano src/invitationList.js

Al suo interno, aggiungi queste righe di codice:

import React from 'react';

import axios from 'axios';

export default class PostList extends React.Component {
  state = {
    posts: []
  }

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

  render() {
    return (
      <ul>
        { this.state.posts.map(post => <li>{post.title}</li>)}
      </ul>
    )
  }
}

All'interno di questo codice, la prima parte di istruzioni serve a importare React e Axios per renderli utilizzabili nella componente.

La parte in cui si esegue la richiesta è invece quella di componentDidMount, in cui, tramite il comando axios.get(url), esegui una richiesta di GET a una API per avere una promise che dovrebbe restituire un oggetto contenente i dati che assegnerai a post.

Implementare una richiesta POST

In questo altro esempio, puoi costruire il file precedente con un codice sorgente diverso, per poter richiedere un input dall'utente e inviarne il contenuto, tramite il metodo POST, a un API.

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

export default class PostList extends React.Component {
  state = {
    title: '',
  }

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

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

    const post = {
      title: this.state.title
    };

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

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <label>
            Post Title:
            <input type="text" name="title" onChange={this.handleChange} />
          </label>
          <button type="submit">Add</button>
        </form>
      </div> 
    )
  }
}

All'interno della funzione handleSubmit, stabilisci la action di default del form e aggiorna lo stato con il titolo del messaggio.

Tramite il metodo POST, ti verrà restituito lo stesso oggetto di risposta con le informazioni utilizzabili in una chiamata then.

Raccolto l'input del post, il codice lo aggiunge alla richiesta di POST, che darà una risposta. La risposta sarà visibile tramite il console.log.

Implementare una richiesta DELETE

Per cancellare un oggetto da una API, potrai ricorrere al metodo axios.delete passando, come parametro della richiesta, l'URL dell'oggetto da cancellare.

Nell'esempio, puoi notare lo stesso codice implementato per il form con il metodo POST ma in cui ti è permesso di cancellare le informazioni di un messaggio creato in precedenza.

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

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

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

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


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

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

Usare una istanza Base in Axios

In questo esempio, ti verrà mostrato come usare una istanza base, utile a definire un URL e diversi elementi di configurazione di Axios.

Prima di tutto, dovrai creare un nuovo file chiamato api.js:

$ nano src/api.js

Ora occorre creare una configurazione di default all'interno del file ed esportarla:

import axios from 'axios';

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

Fatto ciò, ti basterà importare il file per poter includere la configurazione nel tuo codice:

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

import API from '../api';

export default class PostList extends React.Component {
  handleSubmit = event => {
    event.preventDefault();

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

Grazie a questo esempio, avrai importato l'URL di default da richiamare nel codice  in modo tale da risparmiare tempo nel riscriverlo per intero, qualora puntassi a una sezione differente dell'API.

Usare async e await per lavorare con le promises

In questo esempio, vedrai in azione questi due metodi per poter gestire una richiesta come promise (richiesta asincrona):

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

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

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

Come puoi notare, il metodo await soddisfa la promise eseguendo la cancellazione dell'utente dall'API e restituisce un valore nella variabile response.

Il metodo .then() è stato eliminato e la richiesta è stata delegata al metodo appena mostrato.

Conclusioni

Grazie a questo tutorial e agli esempi mostrati, hai potuto scoprire i vantaggi di Axios e hai imparato come usarli all'interno delle tue applicazioni React per creare e gestire le richieste in HTTPS.