Appels API en utilisant Fetch ou Axios
Dans ce cours, nous allons explorer en détail les méthodes d'appels API en utilisant Fetch et Axios dans des composants React statefull. Nous allons commencer par un exemple simple avec l'API Fetch, puis nous passerons à des exemples plus complets en ajoutant la gestion des erreurs, le chargement et l'affichage des données. Ensuite, nous verrons comment effectuer les mêmes opérations avec Axios, en commençant par un exemple simple puis en abordant une approche plus complète.
Utilisation de l'API Fetch
Exemple simple
Voici un exemple simple d'utilisation de l'API Fetch dans un composant React statefull appelé Fetch.js :
import React, { useState, useEffect } from 'react'
const Fetch = () => {
const [data, setData] = useState(null)
useEffect(() => {
fetch('https://api.example.com/data')
.then((response) => response.json())
.then((data) => {
setData(data)
})
}, [])
return (
<div>
{/* Afficher les données */}
{data && (
<ul>
{data.map((item) => (
<li key={item.id}>{item.name}</li>
))}
</ul>
)}
</div>
)
}
export default FetchDans cet exemple, nous utilisons le hook useEffect pour effectuer l'appel API Fetch lors du montage du composant. Une fois les données récupérées, nous les stockons dans l'état du composant à l'aide du hook useState. Ensuite, nous affichons les données dans une liste à l'aide d'une condition de rendu conditionnelle.
Exemple complet avec gestion des erreurs et du chargement
Pour un exemple plus complet, nous allons ajouter la gestion des erreurs et du chargement des données. Voici le code mis à jour pour le composant Fetch.js :
import React, { useState, useEffect } from 'react'
const Fetch = () => {
const [data, setData] = useState(null)
const [loading, setLoading] = useState(true)
const [error, setError] = useState(null)
useEffect(() => {
const fetchData = async () => {
try {
const response = await fetch('https://api.example.com/data')
if (!response.ok) {
throw new Error('Erreur lors de la requête : ' + response.status)
}
const data = await response.json()
setData(data)
} catch (error) {
setError(error)
} finally {
setLoading(false)
}
}
fetchData()
}, [])
if (loading) {
return <div>Loading...</div>
}
if (error) {
return <div>Error: {error.message}</div>
}
return (
<div>
{/* Afficher les données */}
{data && (
<ul>
{data.map((item) => (
<li key={item.id}>{item.name}</li>
))}
</ul>
)}
</div>
)
}
export default FetchDans cet exemple plus complet, nous avons ajouté trois nouveaux états : loading, error et leur gestion correspondante. Lorsque le chargement est en cours, le message "Loading..." est affiché. En cas d'erreur lors de l'appel API, un message d'erreur est affiché. Une fois les données récupérées avec succès, elles sont affichées dans une liste.
Utilisation d'Axios
Exemple simple avec Axios
Axios est une bibliothèque populaire pour effectuer des appels API. Voici un exemple simple d'utilisation d'Axios dans un composant React statefull appelé Axios.js :
import React, { useState, useEffect } from 'react'
import axios from 'axios'
const Axios = () => {
const [data, setData] = useState(null)
useEffect(() => {
axios.get('https://api.example.com/data').then((response) => {
setData(response.data)
})
}, [])
return (
<div>
{/* Afficher les données */}
{data && (
<ul>
{data.map((item) => (
<li key={item.id}>{item.name}</li>
))}
</ul>
)}
</div>
)
}
export default AxiosDans cet exemple, nous utilisons le hook useEffect pour effectuer l'appel API Axios lors du montage du composant. Une fois les données récupérées, nous les stockons dans l'état du composant à l'aide du hook useState. Ensuite, nous affichons les données dans une liste à l'aide d'une condition de rendu conditionnelle.
Exemple complet avec gestion des erreurs et du chargement
Pour un exemple plus complet avec Axios, nous allons ajouter la gestion des erreurs et du chargement des données. Voici le code mis à jour pour le composant Axios.js :
import React, { useState, useEffect } from 'react'
import axios from 'axios'
const Axios = () => {
const [data, setData] = useState(null)
const [loading, setLoading] = useState(true)
const [error, setError] = useState(null)
useEffect(() => {
const fetchData = async () => {
try {
const response = await axios.get('https://api.example.com/data')
setData(response.data)
} catch (error) {
setError(error)
} finally {
setLoading(false)
}
}
fetchData()
}, [])
if (loading) {
return <div>Loading...</div>
}
if (error) {
return <div>Error: {error.message}</div>
}
return (
<div>
{/* Afficher les données */}
{data && (
<ul>
{data.map((item) => (
<li key={item.id}>{item.name}</li>
))}
</ul>
)}
</div>
)
}
export default AxiosDans cet exemple plus complet avec Axios, nous avons également ajouté les états loading, error et leur gestion correspondante. Le message "Loading..." est affiché pendant le chargement des données, et en cas d'erreur, un message d'erreur est affiché. Une fois les données récupérées avec succès, elles sont affichées dans une liste.
Conclusion
Dans ce cours, nous avons exploré les méthodes d'appels API en utilisant Fetch et Axios dans des composants React statefull. Nous avons vu comment effectuer des appels API simples, puis nous avons étendu les exemples en ajoutant la gestion des erreurs et du chargement des données. En utilisant ces approches, vous serez en mesure de récupérer et d'afficher des données provenant d'API externes de manière efficace et robuste dans vos
projets ReactJs. L'utilisation de Fetch et Axios offre une flexibilité et une facilité d'utilisation pour interagir avec des API, tout en permettant une gestion optimale des erreurs et du chargement des données. À présent, vous êtes prêt à appliquer ces connaissances dans vos développements et à créer des applications performantes et réactives intégrant des appels API de manière fluide. Bonne continuation dans votre parcours d'expertise en JavaScript et ReactJs !