Gestion des réponses asynchrones et affichage des données

Dans ce cours, nous allons aborder la gestion des réponses asynchrones et l'affichage des données dans les composants React. Nous examinerons en détail le fonctionnement de async/await pour la gestion des réponses asynchrones, puis nous verrons comment afficher les données récupérées depuis une API dans des composants React.

Fonctionnement de async/await

L'utilisation de async/await permet de gérer plus facilement les réponses asynchrones dans JavaScript. Il repose sur les Promises et simplifie la syntaxe en utilisant des mots-clés async et await. Voici un exemple illustrant son fonctionnement :

const fetchData = async () => {
    try {
        const response = await fetch('https://api.example.com/data')
        const data = await response.json()
        console.log(data)
    } catch (error) {
        console.error("Une erreur s'est produite :", error)
    }
}
 
fetchData()

Dans cet exemple, nous utilisons une fonction fetchData déclarée comme async pour gérer de manière asynchrone l'appel à une API via fetch. L'utilisation de await permet d'attendre la résolution de la Promise retournée par fetch avant de continuer l'exécution du code. Ainsi, nous pouvons récupérer les données JSON de manière synchrone et les utiliser dans notre application.

Gestion des réponses asynchrones à l'aide de Promises ou de l'API async/await

Dans un composant stateless, nous pouvons utiliser les Promises ou l'API async/await pour gérer les réponses asynchrones lors des appels à une API. Voici un exemple utilisant les Promises :

import React, { useState, useEffect } from 'react'
 
const FetchData = () => {
    const [data, setData] = useState([])
 
    useEffect(() => {
        fetch('https://api.example.com/data')
            .then((response) => response.json())
            .then((data) => {
                setData(data)
            })
            .catch((error) => {
                console.error("Une erreur s'est produite :", error)
            })
    }, [])
 
    return (
        <div>
            {/* Afficher les données */}
            {data.map((item) => (
                <div key={item.id}>{item.title}</div>
            ))}
        </div>
    )
}
 
export default FetchData

Dans cet exemple, nous utilisons fetch pour récupérer les données à partir de l'URL spécifiée. Nous utilisons ensuite des Promises avec les méthodes then et catch pour gérer les réponses et les erreurs. Les données récupérées sont stockées dans l'état du composant à l'aide du hook useState et affichées dans le rendu du composant.

Nous pouvons également utiliser l'API async/await pour gérer les réponses asynchrones dans un composant stateless. Voici un exemple :

import React, { useState, useEffect } from 'react'
 
const FetchData = () => {
    const [data, setData] = useState([])
 
    useEffect(() => {
        const fetchData = async () => {
            try {
                const response = await fetch('https://api.example.com/data')
                const data = await response.json()
                setData(data)
            } catch (error) {
                console.error("Une erreur s'est produite :", error)
            }
        }
 
        fetchData()
    }, [])
 
    return (
        <div>
            {/* Afficher les données */}
            {data.map((item) => (
                <div key={item.id}>{item.title}</div>
            ))}
        </div>
    )
}
 
export default FetchData

Dans cet exemple, nous utilisons async/await pour gérer les réponses asynchrones. La fonction fetchData déclarée comme async permet d'utiliser await pour attendre la résolution des Promises. Les données récupérées sont ensuite stockées dans l'état du composant et affichées dans le rendu.

Affichage des données récupérées depuis l'API dans les composants React

Une fois les données récupérées depuis l'API, nous pouvons les afficher dans les composants React. Voici un exemple utilisant des données récupérées à partir d'une API :

import React, { useState, useEffect } from 'react'
 
const FetchData = () => {
    const [data, setData] = useState([])
 
    useEffect(() => {
        const fetchData = async () => {
            try {
                const response = await fetch('https://api.example.com/data')
                const data = await response.json()
                setData(data)
            } catch (error) {
                console.error("Une erreur s'est produite :", error)
            }
        }
 
        fetchData()
    }, [])
 
    return (
        <div>
            <h1>Liste des données</h1>
            <ul>
                {data.map((item) => (
                    <li key={item.id}>{item.title}</li>
                ))}
            </ul>
        </div>
    )
}
 
export default FetchData

Dans cet exemple, nous utilisons les données récupérées à partir de l'API et les affichons dans le rendu du composant. Les données sont parcourues à l'aide de map pour créer une liste d'éléments <li> avec les titres.

Conclusion

Dans ce cours, nous avons exploré la gestion des réponses asynchrones et l'affichage des données dans les composants React. Nous avons examiné en détail le fonctionnement de async/await pour gérer les réponses asynchrones de manière plus fluide. Nous avons également vu comment utiliser les Promises et l'API async/await pour gérer les réponses asynchrones dans des composants stateless. Enfin, nous avons appris comment afficher les données récupérées depuis une API dans les composants React. Avec ces connaissances, vous serez en mesure de gérer efficacement les réponses asynchrones et d'afficher les données dans vos applications React. Continuez à pratiquer et à approfondir vos compétences en JavaScript et ReactJs !