12 Juil 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>
)
}
}