Verwendung von Axios in React: Beispiele für GET- und POST-Anfragen

Axios ist ein promise-basierter HTTP-Client, der das Senden von HTTP-Anfragen in React-Anwendungen vereinfacht. Es optimiert Aufgaben wie das Abrufen von Daten von APIs und das Senden von Daten an Server. In diesem Leitfaden werden wir anhand praktischer Beispiele für GET- und POST-Anfragen untersuchen, wie Axios in React verwendet wird.

Einrichtung von Axios in React

Um mit Axios in Ihrem React-Projekt zu beginnen:

1. Installieren Sie Axios:

   npm install axios
   

2. Importieren Sie Axios in Ihre Komponente:

   import axios from 'axios';
   

Durchführen von GET-Anfragen

Eine GET-Anfrage ruft Daten von einem bestimmten Endpunkt ab. So führen Sie eine GET-Anfrage mit Axios in einer React-Komponente durch:

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function DataFetchingComponent() {
  const [data, setData] = useState([]);

  useEffect(() => {
    axios.get('https://jsonplaceholder.typicode.com/posts')
      .then(response => {
        setData(response.data);
      })
      .catch(error => {
        console.error('Fehler beim Abrufen der Daten:', error);
      });
  }, []);

  return (
    <div>
      <h1>Beiträge</h1>
      <ul>
        {data.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

export default DataFetchingComponent;

Erklärung:

• Zustandsinitialisierung: useState initialisiert data als leeres Array.
• Datenabruf: axios.get ruft Daten vom API-Endpunkt ab.
• Effect Hook: useEffect stellt sicher, dass die GET-Anfrage einmal ausgeführt wird, nachdem die Komponente eingebunden wurde.
• Fehlerbehandlung: Fehler werden abgefangen und in der Konsole protokolliert.

Durchführen von POST-Anfragen

Eine POST-Anfrage sendet Daten an einen Server, um eine neue Ressource zu erstellen. So führen Sie eine POST-Anfrage mit Axios in einer React-Komponente durch:

import React, { useState } from 'react';
import axios from 'axios';

function CreatePostComponent() {
  const [title, setTitle] = useState('');
  const [body, setBody] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    const post = { title, body };
    axios.post('https://jsonplaceholder.typicode.com/posts', post)
      .then(response => {
        console.log('Beitrag erstellt:', response.data);
      })
      .catch(error => {
        console.error('Fehler beim Erstellen des Beitrags:', error);
      });
  };

  return (
    <div>
      <h1>Beitrag erstellen</h1>
      <form onSubmit={handleSubmit}>
        <div>
          <label>Titel:</label>
          <input
            type=""text""
            value={title}
            onChange={(e) => setTitle(e.target.value)}
          />
        </div>
        <div>
          <label>Inhalt:</label>
          <textarea
            value={body}
            onChange={(e) => setBody(e.target.value)}
          />
        </div>
        <button type=""submit"">Absenden</button>
      </form>
    </div>
  );
}

export default CreatePostComponent;

Erklärung:

• Zustandsinitialisierung: useState initialisiert title und body als leere Strings.
• Formularverarbeitung: Das Formular erfasst die Benutzereingaben für Titel und Inhalt des Beitrags.
• Submit-Funktion: handleSubmit verhindert das Standardverhalten beim Absenden des Formulars, erstellt ein post-Objekt und sendet es mit axios.post.
• Fehlerbehandlung: Fehler werden abgefangen und in der Konsole protokolliert.

FAQs

Fazit

Axios ist ein leistungsstarkes Werkzeug zur Handhabung von HTTP-Anfragen in React-Anwendungen. Wenn Sie verstehen, wie GET- und POST-Anfragen durchgeführt werden, können Sie effizient mit APIs interagieren und Daten innerhalb Ihrer React-Komponenten verwalten.