Utilisation du GET d’Axios en React

Dans cet article on va récupérer la liste des personnes en utilisant un fichier Json.

Les Avantages d’utilisation d’Axios :

• Axios s’occupe automatiquement de transformer les réponses en JSON
• Il est possible d’annuler une requête 

Voilà la première chose il faut installer Axios sur notre projet:

/* AVEC Yarn */
$ yarn add axios

/* AVEC npm */
$ npm install axios --save

L’étape suivante est d’importer Axios dans notre componant

import React, { Component } from 'react';
/*
*
*
*/
import axios from 'axios';
/*
*
*
*/
Class NOM_DU_COMPONENT Home extends Component {

        state = {
		listePerson: []
	}
	
	componentDidMount() {
              axios.get(`URL_GET_JSON`)
		  .then(res => {
			const listePerson = res.data;
			this.setState({ listePerson });
	      })
	}

        render() {
		return (
                       <ul>
				{ this.state.listePerson.map((person, index) => <li key={index}>{person.email}</li>)}
		       </ul>
                )
        }

}