Méthodes CRUD (GET, POST, PUT et DELETE)

Dans ce cours, nous allons approfondir l'utilisation des méthodes GET, POST, PUT et DELETE pour interagir avec les serveurs. Nous examinerons comment utiliser ces méthodes pour récupérer, créer, mettre à jour et supprimer des données côté serveur. Nous verrons également comment envoyer des données JSON dans les requêtes et traiter les réponses JSON.

Utilisation des différentes méthodes HTTP

Pour interagir avec les serveurs, nous pouvons utiliser les méthodes HTTP correspondantes. Dans un composant stateless, voici comment vous pouvez utiliser ces méthodes :

Méthode GET

La méthode GET est utilisée pour récupérer des données à partir du serveur. Voici un exemple d'utilisation de la méthode GET pour récupérer des articles :

import React, { useState, useEffect } from 'react'
 
const ArticleList = () => {
    const [articles, setArticles] = useState([])
 
    useEffect(() => {
        fetch('https://api.example.com/articles')
            .then((response) => response.json())
            .then((data) => {
                setArticles(data)
            })
            .catch((error) => {
                console.error("Une erreur s'est produite :", error)
            })
    }, [])
 
    return (
        <div>
            <h1>Liste des articles</h1>
            <ul>
                {articles.map((article) => (
                    <li key={article.id}>{article.title}</li>
                ))}
            </ul>
        </div>
    )
}
 
export default ArticleList

Dans cet exemple, nous utilisons la méthode GET pour récupérer les articles à partir de l'URL "https://api.example.com/articles (opens in a new tab)". Les données récupérées sont ensuite stockées dans l'état du composant à l'aide du hook useState, puis affichées dans une liste.

Méthode POST

La méthode POST est utilisée pour envoyer des données au serveur afin de créer de nouvelles ressources. Voici un exemple d'utilisation de la méthode POST pour créer un nouvel article :

import React, { useState } from 'react'
import axios from 'axios'
 
const CreateArticle = () => {
    const [title, setTitle] = useState('')
    const [content, setContent] = useState('')
 
    const handleSubmit = async (event) => {
        event.preventDefault()
 
        const data = {
            title,
            content,
        }
 
        try {
            const response = await axios.post('https://api.example.com/articles', data)
            console.log('Article créé:', response.data)
        } catch (error) {
            console.error("Une erreur s'est produite :", error)
        }
    }
 
    return (
        <div>
            <h1>Créer un nouvel article</h1>
            <form onSubmit={handleSubmit}>
                <input
                    type='text'
                    placeholder='Titre'
                    value={title}
                    onChange={(event) => setTitle(event.target.value)}
                />
                <textarea
                    placeholder='Contenu'
                    value={content}
                    onChange={(event) => setContent(event.target.value)}
                ></textarea>
                <button type='submit'>Créer</button>
            </form>
        </div>
    )
}
 
export default CreateArticle

Dans cet exemple, nous utilisons la méthode POST pour envoyer les données du nouvel article au serveur à partir de l'URL "https://api.example.com/articles (opens in a new tab)". Les données du formulaire sont récupérées à l'aide du hook useState, puis envoyées via la méthode POST en utilisant la bibliothèque Axios.

Méthode PUT

La méthode PUT est utilisée pour mettre à jour des données existantes côté serveur. Voici un exemple d'utilisation de la méthode PUT pour mettre à jour un article :

import React, { useState, useEffect } from 'react'
import axios from 'axios'
 
const UpdateArticle = ({ articleId }) => {
    const [title, setTitle] = useState('')
    const [content, setContent] = useState('')
 
    useEffect(() => {
        const fetchArticle = async () => {
            try {
                const response = await axios.get(`https://api.example.com/articles/${articleId}`)
                const articleData = response.data
                setTitle(articleData.title)
                setContent(articleData.content)
            } catch (error) {
                console.error("Une erreur s'est produite :", error)
            }
        }
 
        fetchArticle()
    }, [articleId])
 
    const handleSubmit = async (event) => {
        event.preventDefault()
 
        const data = {
            title,
            content,
        }
 
        try {
            const response = await axios.put(`https://api.example.com/articles/${articleId}`, data)
            console.log('Article mis à jour:', response.data)
        } catch (error) {
            console.error("Une erreur s'est produite :", error)
        }
    }
 
    return (
        <div>
            <h1>Modifier l'article</h1>
            <form onSubmit={handleSubmit}>
                <input
                    type='text'
                    placeholder='Titre'
                    value={title}
                    onChange={(event) => setTitle(event.target.value)}
                />
                <textarea
                    placeholder='Contenu'
                    value={content}
                    onChange={(event) => setContent(event.target.value)}
                ></textarea>
                <button type='submit'>Enregistrer</button>
            </form>
        </div>
    )
}
 
export default UpdateArticle

Dans cet exemple, nous utilisons la méthode PUT pour mettre à jour les données de l'article existant sur le serveur à partir de l'URL "https://api.example.com/articles/{articleId} (opens in a new tab)". Les données de l'article sont récupérées à l'aide de la méthode GET, puis mises à jour via la méthode PUT en utilisant Axios.

Méthode DELETE

La méthode DELETE est utilis

ée pour supprimer des données côté serveur. Voici un exemple d'utilisation de la méthode DELETE pour supprimer un article :

import React, { useState } from 'react'
import axios from 'axios'
 
const DeleteArticle = ({ articleId }) => {
    const [deleted, setDeleted] = useState(false)
 
    const handleDelete = async () => {
        try {
            await axios.delete(`https://api.example.com/articles/${articleId}`)
            setDeleted(true)
            console.log('Article supprimé avec succès.')
        } catch (error) {
            console.error("Une erreur s'est produite :", error)
        }
    }
 
    if (deleted) {
        return <div>L'article a été supprimé.</div>
    }
 
    return (
        <div>
            <h1>Supprimer l'article</h1>
            <p>Êtes-vous sûr de vouloir supprimer cet article ?</p>
            <button onClick={handleDelete}>Supprimer</button>
        </div>
    )
}
 
export default DeleteArticle

Dans cet exemple, nous utilisons la méthode DELETE pour supprimer l'article existant sur le serveur à partir de l'URL "https://api.example.com/articles/{articleId} (opens in a new tab)". Lorsque le bouton de suppression est cliqué, la méthode DELETE est appelée à l'aide d'Axios. Une fois l'article supprimé avec succès, un message approprié est affiché.

Envoi de données JSON dans les requêtes et traitement des réponses JSON

Lors de l'interaction avec des serveurs, il est courant d'envoyer des données au format JSON dans les requêtes et de recevoir des réponses JSON. Voici comment vous pouvez le faire dans un composant stateless :

Envoi de données JSON dans une requête

Pour envoyer des données JSON dans une requête, vous devez spécifier l'en-tête "Content-Type" comme "application/json" et convertir vos données en une chaîne JSON à l'aide de JSON.stringify(). Voici un exemple d'envoi de données JSON dans une requête POST avec Axios :

import React from 'react'
import axios from 'axios'
 
const CreateArticle = () => {
    const handleSubmit = async (event) => {
        event.preventDefault()
 
        const data = {
            title: 'Nouvel article',
            content: "Contenu de l'article",
        }
 
        try {
            const response = await axios.post(
                'https://api.example.com/articles',
                JSON.stringify(data),
                {
                    headers: {
                        'Content-Type': 'application/json',
                    },
                },
            )
            console.log('Article créé:', response.data)
        } catch (error) {
            console.error("Une erreur s'est produite :", error)
        }
    }
 
    return (
        <div>
            <h1>Créer un nouvel article</h1>
            <form onSubmit={handleSubmit}>{/* ... */}</form>
        </div>
    )
}
 
export default CreateArticle

Dans cet exemple, nous utilisons Axios pour effectuer une requête POST avec des données JSON. Les données sont converties en une chaîne JSON à l'aide de JSON.stringify() et spécifiées dans le corps de la requête. L'en-tête "Content-Type" est également défini sur "application/json" pour indiquer au serveur que les données sont au format JSON.

Traitement des réponses JSON

Lorsque vous recevez des réponses du serveur au format JSON, vous pouvez les traiter en utilisant la méthode .json() pour extraire les données JSON. Voici un exemple de traitement d'une réponse JSON avec Fetch :

import React, { useState, useEffect } from 'react'
 
const ArticleList = () => {
    const [articles, setArticles] = useState([])
 
    useEffect(() => {
        fetch('https://api.example.com/articles')
            .then((response) => response.json())
            .then((data) => {
                setArticles(data)
            })
            .catch((error) => {
                console.error("Une erreur s'est produite :", error)
            })
    }, [])
 
    return (
        <div>
            <h1>Liste des articles</h1>
            <ul>
                {articles.map((article) => (
                    <li key={article.id}>{article.title}</li>
                ))}
            </ul>
        </div>
    )
}
 
export default ArticleList

Dans cet exemple, nous utilisons la méthode .json() pour extraire les données JSON de la réponse de l'API. Les données JSON sont ensuite stockées dans l'état du composant à l'aide du hook useState et affichées dans une liste.

Conclusion

Dans ce cours, nous avons exploré l'utilisation des méthodes GET, POST, PUT et DELETE pour interagir avec les serveurs. Nous avons vu comment les utiliser dans des composants stateless pour récupérer, créer, mettre à jour et supprimer des données côté serveur. Nous avons également abordé l'envoi de données JSON dans les requêtes et le traitement des réponses JSON. En utilisant ces connaissances, vous serez en mesure de construire des applications robustes qui interagissent efficacement avec les serveurs. Continuez à pratiquer et à approfondir vos compétences dans le développement JavaScript et ReactJs !

4.1 Appels API en utilisant Fetch ou Axios 4.3 Gestion des réponses asynchrones et affichage des données