So senden Sie axios delete in JavaScript an das Backend ReactJS

Was ist „Axios löschen“?

Das Löschen von Daten aus dem Backend mit ReactJS und Axios kann eine herausfordernde Aufgabe sein. Mit der richtigen Herangehensweise und dem richtigen Wissen können Sie diese Aufgabe jedoch problemlos bewältigen. In diesem Artikel erfahren Sie, wie Sie mithilfe von JavaScript eine Axios-Löschanfrage an das Backend in ReactJS senden. Wir werden zwei verschiedene Ansätze mit Code und Erklärungen sowie zwei Arbeitsbeispielen durchgehen. Also, fangen wir an!

Algorithmus

Bevor wir mit unserer Diskussion beginnen, ist es wichtig, den Prozess des Sendens einer Axios-Löschanfrage an das Backend bei Verwendung von ReactJS zu verstehen. Hier sind die Schritte -

• Axios integrieren – Muss Axios enthalten, eine beliebte Bibliothek für gefälschte HTTP-Petitionen.

• Erstellen Sie eine eindeutige Anfrage – Anschließend verwenden Sie Axios, um eine eindeutige Anfrage zu initiieren. Dazu müssen der Uniform Resource Locator (URL), Header (falls vorhanden) und alle Daten angegeben werden, die an den Server übertragen werden müssen.

• Anfrage senden – Zusammenfassend werden Sie Axios verwenden, um eine eindeutige Anfrage an den Server zu senden.

Methode 1: Axios-Löschmethode verwenden

Die erste Methode beinhaltet die Verwendung der Axios-Löschmethode. Hier ist der 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);
   }
};

Im obigen Code haben wir eine Funktion namens deleteData definiert, die einen ID-Parameter akzeptiert. Innerhalb der Funktion verwenden wir die Löschmethode von Axios, um eine Löschanforderung an den Server zu senden. Die Ziel-URL enthält den ID-Parameter, der die Daten darstellt, die wir löschen möchten. Wenn die Anfrage erfolgreich ist, protokollieren wir die Antwortdaten in der Konsole. Wenn ein Fehler auftritt, protokollieren wir den Fehler in der Konsole.

Beispiel

In diesem Beispiel erstellen wir eine Löschschaltfläche, die beim Klicken Daten löscht. Hier ist der 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;

Der obige Code veranschaulicht eine Komponente namens „DeleteButton“, die das Akzeptieren des ID-Attributs zum Erstellen einer Löschanforderungs-URL ermöglicht. Wenn auf die Schaltfläche „Löschen“ geklickt wird, wird die Funktion „handleDelete“ aufgerufen, die mithilfe der Axios-Löschmethode eine Löschanforderung an den Server sendet und die entsprechende ID angibt. Nachdem die Anfrage erfolgreich war, werden die Antwortdaten in der Konsole protokolliert. Tritt stattdessen ein Fehler auf, wird dieser Fehler auch in der Konsole protokolliert.

Methode 2: Verwenden Sie die Axios-Anfragemethode

Die Alternative erfordert die Verwendung des Axios-Anfrageprozesses und die Attributeinstellung „Löschen“ des Methodenattributs. Unten finden Sie den entsprechenden Codeausschnitt -

// 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);
   }
}

In diesem Code definieren wir dieselbe deleteData-Funktion wie die erste Methode. Anstatt jedoch die Axios-Delete-Methode zu verwenden, verwenden wir die Axios-Request-Methode und setzen das Methodenattribut auf „Delete“. Wenn die Anfrage erfolgreich ist, protokollieren wir die Antwortdaten in der Konsole. Wenn ein Fehler auftritt, protokollieren wir den Fehler in der Konsole.

Da wir nun beide Methoden mit Code und Erklärungen behandelt haben, schauen wir uns zwei Arbeitsbeispiele an, wie man eine Axios-Löschanfrage an das Backend in ReactJS sendet.

Beispiel: Bestätigungsmodus löschen

In diesem Beispiel erstellen wir ein Löschbestätigungsmuster, um die Daten nach der Bestätigung zu löschen. Hier ist der 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;

Ausgabe

Der obige Code enthält eine Komponente namens DeleteConfirmationModal, die ein ID-Attribut akzeptiert. Wenn Sie auf die Schaltfläche „Löschen“ klicken, wird ein Bestätigungsmodus angezeigt. Bestätigt der Benutzer den Löschvorgang, wird die handleDelete-Funktion ausgeführt. Diese Funktion verwendet die Axios-Delete-Methode, um eine Löschanforderung an den Server zu senden und die ID anzugeben. Nachdem die Anfrage erfolgreich war, werden die Antwortdaten in der Konsole protokolliert. Tritt stattdessen ein Fehler auf, wird dieser Fehler auch in der Konsole protokolliert. Kurz gesagt, der isOpen-Status wird auf „false“ gesetzt, wodurch der Bestätigungsmodus deaktiviert wird.

Fazit

In diesem Artikel haben wir untersucht, wie man mithilfe von JavaScript eine Axios-Löschanfrage an das Backend in ReactJS sendet. Wir stellen zwei unterschiedliche Ansätze mit Code und Erläuterungen sowie zwei Arbeitsbeispielen vor. Wenn Sie die in diesem Artikel beschriebenen Schritte befolgen, sollten Sie in der Lage sein, Daten mithilfe von ReactJS und Axios problemlos aus Ihrem Backend zu löschen.

Das obige ist der detaillierte Inhalt vonSo senden Sie axios delete in JavaScript an das Backend ReactJS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!