Opérations CRUD

6.1 Introduction à CRUD

CRUD — c'est un acronyme qui désigne les quatre opérations principales que tu peux réaliser avec des données : création (Create), lecture (Read), mise à jour (Update) et suppression (Delete). Ces opérations sont fondamentales pour travailler avec des bases de données et constituent la base de la plupart des applications web.

Qu'est-ce que CRUD ?

• Create (Création): l'opération de création est utilisée pour ajouter de nouveaux enregistrements dans une base de données. Elle permet d'introduire de nouvelles données dans le système.
• Read (Lecture): l'opération de lecture est utilisée pour extraire des données d'une base de données. Elle permet aux utilisateurs de demander et de visualiser des informations existantes.
• Update (Mise à jour): l'opération de mise à jour est utilisée pour modifier des enregistrements existants dans une base de données. Elle permet d'éditer et de corriger des données.
• Delete (Suppression): l'opération de suppression est utilisée pour supprimer des enregistrements d'une base de données. Elle permet de retirer des données inutiles ou obsolètes.

Méthodes HTTP pour les opérations CRUD

Dans le contexte du développement web, les opérations CRUD sont souvent effectuées en utilisant des requêtes HTTP vers une API. Différentes méthodes HTTP correspondent à différentes opérations CRUD :

• POST: utilisé pour créer de nouvelles ressources.
• GET: utilisé pour lire (obtenir) des ressources.
• PUT et PATCH: utilisés pour mettre à jour des ressources existantes. PUT est généralement utilisé pour remplacer intégralement une ressource, tandis que PATCH — pour une mise à jour partielle.
• DELETE: utilisé pour supprimer des ressources.

Pourquoi les opérations CRUD sont-elles nécessaires ?

Les opérations CRUD sont essentielles pour travailler avec des données dans les applications web. Elles permettent aux développeurs de mettre en œuvre des fonctionnalités de base telles que la création de comptes utilisateurs, l'édition de profils, la visualisation de données et la suppression d'enregistrements. Ces opérations assurent également l'interaction entre le client et le serveur, permettant le transfert de données et de commandes.

Outils modernes pour réaliser des opérations CRUD

Les applications web modernes utilisent souvent divers outils et bibliothèques pour réaliser des opérations CRUD via des API :

• Fetch API: méthode intégrée dans le navigateur pour exécuter des requêtes HTTP, basée sur des promesses.
• Axios: bibliothèque populaire pour effectuer des requêtes HTTP, offrant une API pratique et enrichie.

Ces outils aident les développeurs à réaliser facilement et efficacement des opérations CRUD, assurant flexibilité et simplicité d'intégration avec diverses API serveur.

6.2 Utilisation de Fetch

Voyons l'utilisation de Fetch pour réaliser des opérations CRUD.

Création (Create) :

    
      const createData = async (data) => {
        const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify(data)
        });
        const result = await response.json();
        console.log('Created:', result);
      };

      createData({ title: 'foo', body: 'bar', userId: 1 });
    
  

Lecture (Read) :

    
      const readData = async (id) => {
        const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`);
        const result = await response.json();
        console.log('Read:', result);
      };

      readData(1);
    
  

Mise à jour (Update) :

    
      const updateData = async (id, data) => {
        const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`, {
          method: 'PUT',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify(data)
        });
        const result = await response.json();
        console.log('Updated:', result);
      };

      updateData(1, { title: 'foo', body: 'bar', userId: 1 });
    
  

Suppression (Delete) :

    
      const deleteData = async (id) => {
        const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`, {
          method: 'DELETE'
        });
        if (response.ok) {
          console.log('Deleted:', id);
        } else {
          console.error('Failed to delete:', id);
        }
      };

      deleteData(1);
    
  

6.3 Utilisation de Axios

Voyons l'utilisation de Axios pour réaliser des opérations CRUD.

Création (Create) :

    
      const axios = require('axios');

      const createData = async (data) => {
        try {
          const response = await axios.post('https://jsonplaceholder.typicode.com/posts', data);
          console.log('Created:', response.data);
        } catch (error) {
          console.error('Error creating data:', error);
        }
      };

      createData({ title: 'foo', body: 'bar', userId: 1 });
    
  

Lecture (Read) :

    
      const readData = async (id) => {
        try {
          const response = await axios.get(`https://jsonplaceholder.typicode.com/posts/${id}`);
          console.log('Read:', response.data);
        } catch (error) {
          console.error('Error reading data:', error);
        }
      };

      readData(1);
    
  

Mise à jour (Update) :

    
      const updateData = async (id, data) => {
        try {
          const response = await axios.put(`https://jsonplaceholder.typicode.com/posts/${id}`, data);
          console.log('Updated:', response.data);
        } catch (error) {
          console.error('Error updating data:', error);
        }
      };

      updateData(1, { title: 'foo', body: 'bar', userId: 1 });
    
  

Suppression (Delete) :

    
      const deleteData = async (id) => {
        try {
          const response = await axios.delete(`https://jsonplaceholder.typicode.com/posts/${id}`);
          if (response.status === 200) {
            console.log('Deleted:', id);
          }
        } catch (error) {
          console.error('Error deleting data:', error);
        }
      };

      deleteData(1);
    
  

6.4 Conseils pour l'utilisation de CRUD

Conseils pour l'utilisation des opérations CRUD via une API :

1. Gestion des erreurs: traite toujours les erreurs possibles lors de l'exécution des requêtes HTTP. Utilise des blocs try...catch ou des méthodes catch pour gérer les erreurs.
2. Validation des données: avant d'envoyer des données au serveur, assure-toi qu'elles respectent le format attendu.
3. Authentification et autorisation: lors du travail avec des ressources protégées, assure-toi de bien gérer l'authentification et l'autorisation, par exemple, en ajoutant des jetons d'accès dans les en-têtes des requêtes.
4. Pagination et filtrage: lors de la réception de grands volumes de données, utilise des paramètres de requête pour la pagination et le filtrage des données.
5. Mise en cache: pour améliorer les performances, il est possible de mettre en cache les données souvent demandées.