Comment utiliser Axios avec React

Introduction

De nombreux projets sur le web doivent s’interfacer avec une API REST à un certain stade de leur développement. Axios est un client HTTP léger basé sur le service $http dans Angular.js v1.x et est similaire à l’API native JavaScript Fetch.

Axios est basé sur Promise, ce qui vous permet de profiter des avantages d’async de JavaScript et await pour un code asynchrone plus lisible.

Vous pouvez également intercepter et annuler des demandes, et il existe une protection intégrée côté client contre la falsification des demandes intersites.

Dans cet article, vous explorerez des exemples d’utilisation d’Axios pour accéder à la populaire API JSON Placeholder au sein d’une application React.

Conditions préalables

Pour suivre cet article, vous aurez besoin de ce qui suit :

• Node.js version 10.16.0 installé sur votre ordinateur. Pour l’installer sur macOS ou Ubuntu 18.04, suivez les étapes du tutoriel Comment installer Node.js et créer un environnement de développement local sur macOS ou la section **Installation à l’aide d’un PPA **du tutoriel Comment installer Node.js sur Ubuntu 18.04.
• Un nouveau projet React mis en place avec Créez l’application React en suivant le tutoriel Comment mettre en place un projet React avec Create React App.
• Il sera également utile d’avoir une compréhension de base de JavaScript, que vous pouvez trouver dans les séries Comment coder en JavaScript, ainsi qu’une connaissance de base de HTML et CSS.

Étape 1 — Ajouter Axios au projet

Dans cette section, vous ajouterez Axios au projet React digital-ocean-tutorial que vous avez créé en suivant le tutoriel Comment mettre en place un projet React avec Create React App.

Pour ajouter Axios au projet, ouvrez votre terminal et changez de répertoire dans votre projet :

cd digital-ocean-tutorial

Exécutez ensuite cette commande pour installer Axios :

npm install axios

Ensuite, vous devrez importer Axios dans le fichier dans lequel vous voulez l’utiliser.

Étape 2 — Faire une requête GET

Dans cet exemple, vous créez un nouveau composant et vous y importez Axios pour envoyer une demande GET.

Dans le dossier src de votre projet React, créez un nouveau composant nommé PersonList.js :

nano src/PersonList.js

Ajoutez le code suivant au composant :

import React from 'react';

import axios from 'axios';

export default class PersonList extends React.Component {
  state = {
    persons: []
  }

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

  render() {
    return (
      <ul>
        { this.state.persons.map(person => <li>{person.name}</li>)}
      </ul>
    )
  }
}

Tout d’abord, vous importez React et Axios afin que les deux puissent être utilisés dans le composant. Ensuite, vous vous branchez sur le componentDidMount lifecycle hook et effectuez une demande GET.

Vous utilisez axios.get(url) avec une URL provenant d’un point final de l’API pour obtenir une promesse qui renvoie un objet de réponse. À l’intérieur de l’objet de réponse, il y a des données auxquelles on attribue la valeur person.

Vous pouvez également obtenir d’autres informations sur la demande, telles que le code de statut sous res.status ou plus d’informations à l’intérieur de res.request.

Étape 3 — Faire une demande POST

Dans cette étape, vous utiliserez Axios avec une autre méthode de requête HTTP appelée POST.

Supprimer le code précédent dans PersonList et ajoutez les éléments suivants pour créer un formulaire qui permet à l’utilisateur d’entrer des données et ensuite POSTer le contenu à une API :

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

export default class PersonList extends React.Component {
  state = {
    name: '',
  }

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

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

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

    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>
            Person Name:
            <input type="text" name="name" onChange={this.handleChange} />
          </label>
          <button type="submit">Add</button>
        </form>
      </div>
    )
  }
}

Dans la fonction handleSubmit, vous empêchez l’action par défaut du formulaire. Ensuite, vous mettez à jour l'état en entrée de l'utilisateur.

Utiliser POST vous donne le même objet de réponse avec des informations que vous pouvez utiliser dans un appel then.

Pour compléter la demande POST, vous devez d’abord saisir l’entrée de l'utilisateur. Ensuite, vous ajoutez les données en même temps que la demande POST, qui vous donnera une réponse. Vous pouvez alors utiliser console.log pour la réponse, qui devrait montrer l’entrée user dans le formulaire.

Étape 4 — Faire une demande DELETE

Dans cet exemple, vous verrez comment supprimer des éléments d’une API en utilisant axios.delete et en passant une URL comme paramètre.

Changez le code du formulaire de l’exemple POST pour supprimer un utilisateur au lieu d’en ajouter un nouveau :

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

export default class PersonList 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>
            Person ID:
            <input type="text" name="id" onChange={this.handleChange} />
          </label>
          <button type="submit">Delete</button>
        </form>
      </div>
    )
  }
}

Là encore, l’objet res vous fournit des informations sur la demande. Vous pouvez ensuite réintroduire ces informations dans le fichier console.log après l’envoi du formulaire.

Étape 5 — Utiliser une instance de base dans Axios

Dans cet exemple, vous verrez comment vous pouvez mettre en place une instance de base dans laquelle vous pouvez définir une URL et tout autre élément de configuration.

Créez un fichier séparé nommé api.js:

nano src/api.js

Exportez une nouvelle instance axios avec ces valeurs par défaut :

import axios from 'axios';

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

Une fois que l’instance par défaut est configurée, elle peut être utilisée dans le composant PersonList. Vous importez la nouvelle instance comme ceci :

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

import API from '../api';

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

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

Parce que http://jsonplaceholder.typicode.com/ est maintenant l’URL de base, vous n’avez plus besoin de taper l’URL complète chaque fois que vous voulez atteindre un point d’extrémité différent sur l’API.

Étape 6 — Utilisation de async et de await

Dans cet exemple, vous verrez comment vous pouvez utiliser async et await pour travailler avec des Promises.

Le mot-clé await résout la Promise et renvoie la value. La value peut alors être attribuée à une variable.

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

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

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

Dans cet exemple de code, le .then() est remplacé. La Promise est résolue, et la value est stockée dans la variable de response.

Conclusion

Dans ce tutoriel, vous avez exploré plusieurs exemples sur la façon d’utiliser Axios dans une application React pour créer des requêtes HTTP et gérer les réponses.

Si vous souhaitez en savoir plus sur le programme React, consultez la série Comment coder dans React.js ou consultez la page thématique de React pour plus d’exercices et de projets de programmation.