Comment envoyer axios delete au backend ReactJS en JavaScript

Qu'est-ce que Envoyer Axios Supprimer ?

Supprimer des données du backend à l'aide de ReactJS et Axios peut être une tâche difficile. Cependant, avec la bonne approche et les bonnes connaissances, vous pouvez accomplir cette tâche facilement. Dans cet article, nous explorerons comment envoyer une demande de suppression Axios au backend dans ReactJS à l'aide de JavaScript. Nous passerons en revue deux approches différentes avec du code et des explications, ainsi que deux exemples pratiques. Alors commençons !

Algorithme

Avant de commencer notre discussion, il est crucial de comprendre le processus d'envoi d'une demande de suppression Axios au backend lors de l'utilisation de ReactJS. Voici les étapes -

• Incorporer Axios - Doit inclure Axios, une bibliothèque populaire pour les fausses pétitions HTTP.

• Créer une demande claire - Vous utiliserez ensuite Axios pour lancer une demande claire. Cela nécessite de spécifier l'URL (Uniform Resource Locator), les en-têtes (le cas échéant) et toutes les données qui doivent être transférées vers le serveur.

• Send Request - En résumé, vous utiliserez Axios pour envoyer une requête claire au serveur.

Méthode 1 : Utiliser la méthode de suppression axios

La première méthode consiste à utiliser la méthode de suppression Axios. Voici le code -

import axios from 'axios';
const deleteData = async (id) => {
   try {
      const response = await axios.delete(`https://example.com/api/data/${id}`);
      console.log(response.data);
   } catch (error) {
      console.error(error);
   }
};

Dans le code ci-dessus, nous avons défini une fonction appelée deleteData qui prend un paramètre id. À l'intérieur de la fonction, nous utilisons la méthode delete d'axios pour envoyer une demande de suppression au serveur. L'URL que nous ciblons contient le paramètre id, qui représente les données que nous souhaitons supprimer. Si la demande aboutit, nous enregistrons les données de réponse sur la console. Si une erreur se produit, nous enregistrons l'erreur sur la console.

Exemple

Dans cet exemple, nous allons créer un bouton de suppression qui supprimera les données lorsque vous cliquerez dessus. Voici le code -

import React from 'react';
import axios from 'axios';
const DeleteButton = ({ id }) => {
   const handleDelete = async () => {
      try {
         const response = await axios.delete(`https://example.com/api/data/${id}`);
         console.log(response.data);
      } catch (error) {
         console.error(error);
      }
   };
   return (
      <button onClick={handleDelete}>
         Delete
      </button>
   );
};
export default DeleteButton;

Le code ci-dessus illustre un composant appelé "DeleteButton" qui permet d'accepter l'attribut id pour créer une URL de demande de suppression. Lorsque vous cliquez sur le bouton Supprimer, la fonction handleDelete sera appelée, qui utilise la méthode de suppression Axios pour envoyer une demande de suppression au serveur et spécifie l'identifiant correspondant. Une fois la demande réussie, les données de réponse seront enregistrées dans la console. Au lieu de cela, si une erreur se produit, cette erreur est également enregistrée dans la console.

Méthode 2 : Utiliser la méthode de requête axios

L'alternative nécessite d'utiliser le processus de requête Axios et le paramètre d'attribut "delete" de l'attribut de méthode. Vous trouverez ci-dessous l'extrait de code correspondant -

// Import Axios library
const axios = require('axios');

// Define a function to delete data
async function deleteData(id) {
   try {
   
      // Make a DELETE request to the API with the given ID
      const response = await axios({
         url: 'https://example.com/api/data/' + id,
         method: 'delete'
      });
      console.log(response.data);
   } catch (error) {
   
      // Log any errors that occur
      console.error(error);
   }
}

Dans ce code, nous définissons la même fonction deleteData que la première méthode. Cependant, au lieu d'utiliser la méthode de suppression Axios, nous utilisons la méthode de requête Axios et définissons l'attribut de méthode sur « Supprimer ». Si la demande aboutit, nous enregistrons les données de réponse sur la console. Si une erreur se produit, nous enregistrons l'erreur sur la console.

Maintenant que nous avons couvert les deux méthodes avec du code et des explications, examinons deux exemples concrets de la façon d'envoyer une demande de suppression Axios au backend dans ReactJS.

Exemple : Supprimer le mode de confirmation

Dans cet exemple, nous allons créer un modèle de confirmation de suppression pour supprimer les données après confirmation. Voici le code.

import React, { useState } from 'react';
import axios from 'axios';
const DeleteConfirmationModal = ({ id }) => {
   const [isOpen, setIsOpen] = useState(false);
   const handleDelete = async () => {
      try {
         const response = await axios.delete(`https://example.com/api/data/${id}`);
         console.log(response.data);
      } catch (error) {
         console.error(error);
      }
      setIsOpen(false);
   };

   return (
      <>
      <button onClick={() => setIsOpen(true)}>
         Delete
      </button>
      {isOpen && (
         <div>
            <p>Are you sure you want to delete this data?</p>
            <button onClick={handleDelete}>
               Yes, delete it
            </button>
            <button onClick={() => setIsOpen(false)}>
               Cancel
            </button>
         </div>
      )}
      </>
   );
};

export default DeleteConfirmationModal;

Sortie

Le code ci-dessus contient un composant appelé DeleteConfirmationModal, qui accepte un attribut id. Lorsque vous cliquez sur le bouton Supprimer, un mode de confirmation apparaîtra. Si l'utilisateur confirme la suppression, la fonction handleDelete est exécutée. Cette fonction utilise la méthode axios delete pour envoyer une demande de suppression au serveur et spécifie l'identifiant. Une fois la demande réussie, les données de réponse seront enregistrées dans la console. Au lieu de cela, si une erreur se produit, cette erreur est également enregistrée dans la console. En bref, l'état isOpen est défini sur false, désactivant ainsi le mode de confirmation.

Conclusion

Dans cet article, nous avons exploré comment envoyer une demande de suppression Axios au backend dans ReactJS à l'aide de JavaScript. Nous présentons deux approches différentes avec du code et des explications, ainsi que deux exemples de travail. En suivant les étapes décrites dans cet article, vous devriez pouvoir supprimer facilement des données de votre backend à l'aide de ReactJS et Axios.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!