So integrieren Sie REST-APIs in React mit fetch und Axios

REST-API-Integration in React

Die Integration von REST-APIs in eine React-Anwendung ist eine häufige Aufgabe für Webentwickler. REST (Representational State Transfer) ist ein Architekturstil, der Ihnen die Interaktion mit externen Ressourcen (Daten) über HTTP-Methoden wie GET, POST, PUT, DELETE usw. ermöglicht. React erleichtert die Integration mit REST-APIs und ermöglicht Ihnen das Abrufen von Daten , neue Daten veröffentlichen und verschiedene API-Antworten effizient verarbeiten.

In diesem Leitfaden erfahren Sie, wie Sie REST-APIs mithilfe verschiedener Methoden wie der Fetch-API, Axios und der Handhabung des asynchronen Datenabrufs in eine React-App integrieren.

---

1. Abrufen von Daten von einer REST-API

Die fetch()-Funktion ist in JavaScript integriert und bietet eine einfache Möglichkeit, HTTP-Anfragen zu stellen. Es gibt ein Promise zurück, das in das Response-Objekt aufgelöst wird, das die Antwort auf die Anfrage darstellt.

Abruf-API in React verwenden

Hier ist ein einfaches Beispiel für die Verwendung der Fetch-API, um Daten von einer REST-API abzurufen und in einer React-Komponente anzuzeigen.

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

const API_URL = 'https://jsonplaceholder.typicode.com/posts'; // Example REST API

const FetchPosts = () => {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    // Fetch data from the API
    fetch(API_URL)
      .then((response) => {
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        return response.json();
      })
      .then((data) => {
        setPosts(data);
        setLoading(false);
      })
      .catch((error) => {
        setError(error.message);
        setLoading(false);
      });
  }, []);

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;

  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <h2>{post.title}</h2>
            <p>{post.body}</p>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default FetchPosts;

• useState: Wird zum Speichern der Beiträge, des Ladestatus und etwaiger Fehlermeldungen verwendet.
• useEffect: Verwaltet das Abrufen von Daten, wenn die Komponente gemountet wird.
• fetch(): Ruft Daten vom REST-API-Endpunkt ab und verarbeitet sie dann im JSON-Format.
• Fehlerbehandlung: Erfasst alle Fehler (z. B. Netzwerkprobleme) und legt den Fehlerstatus fest.

---

2. Axios für API-Anfragen verwenden

Axios ist ein Promise-basierter HTTP-Client für den Browser und Node.js. Es ist eine Alternative zu fetch und wird oft wegen seiner saubereren Syntax und zusätzlichen Funktionen wie automatischer JSON-Transformation, Anforderungsstornierung und mehr bevorzugt.

Axios installieren

Um Axios zu verwenden, installieren Sie es zunächst über npm:

npm install axios

Axios zum Abrufen von Daten verwenden

Hier ist das gleiche Beispiel wie oben, aber mit Axios.

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

const API_URL = 'https://jsonplaceholder.typicode.com/posts';

const FetchPosts = () => {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    // Fetch data from the API using Axios
    axios
      .get(API_URL)
      .then((response) => {
        setPosts(response.data);
        setLoading(false);
      })
      .catch((error) => {
        setError(error.message);
        setLoading(false);
      });
  }, []);

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;

  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <h2>{post.title}</h2>
            <p>{post.body}</p>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default FetchPosts;

• axios.get(): Ruft Daten von der REST-API ab. Axios analysiert die Antwort automatisch als JSON.
• Fehlerbehandlung: Wenn ein Fehler auftritt, wird dieser abgefangen und in der Komponente angezeigt.

---

3. Senden von Daten an eine REST-API (POST-Anfragen)

Zusätzlich zu GET-Anfragen können Sie Daten auch über POST-Anfragen an einen Server senden. Dies wird häufig zum Senden von Formularen oder zum Erstellen neuer Datensätze verwendet.

Abruf für POST-Anfragen verwenden

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

const API_URL = 'https://jsonplaceholder.typicode.com/posts'; // Example REST API

const FetchPosts = () => {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    // Fetch data from the API
    fetch(API_URL)
      .then((response) => {
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        return response.json();
      })
      .then((data) => {
        setPosts(data);
        setLoading(false);
      })
      .catch((error) => {
        setError(error.message);
        setLoading(false);
      });
  }, []);

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;

  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <h2>{post.title}</h2>
            <p>{post.body}</p>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default FetchPosts;

• POST-Anfrage: Sendet Daten im JSON-Format an die API. In diesem Fall senden wir einen neuen Beitrag mit Titel und Text.
• JSON.stringify(): Konvertiert JavaScript-Objekte in einen JSON-String für den Anfragetext.

Axios für POST-Anfragen verwenden

npm install axios

• axios.post(): Sendet eine POST-Anfrage an die API. Der Anfragetext enthält die zu sendenden Daten.

---

4. Fazit

Die Integration einer REST-API in eine React-Anwendung ist eine entscheidende Fähigkeit für die moderne Webentwicklung. Unabhängig davon, ob Sie fetch() oder eine Bibliothek wie Axios verwenden, bietet Ihnen React leistungsstarke Hooks wie useEffect und useState, um API-Anfragen zu verwalten und die Benutzeroberfläche basierend auf der Antwort zu aktualisieren. Sie können Daten abrufen, senden und Fehler elegant behandeln, um ein reibungsloses Benutzererlebnis zu gewährleisten.

---

Das obige ist der detaillierte Inhalt vonSo integrieren Sie REST-APIs in React mit fetch und Axios. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!