So verwenden Sie Axios in ReactJS – GET- und POST-Anfrage

So verwenden Sie Axios in ReactJS

Einführung

Axios ist eine beliebte Bibliothek zum Ausführen von HTTP-Anfragen wie GET, POST, PUT, DELETE und anderen. Axios eignet sich sehr gut für den Einsatz in React-Anwendungen, da es eine einfache Syntax bietet und Promises unterstützt. In diesem Artikel wird erläutert, wie Axios in einer ReactJS-Anwendung verwendet wird.

Axios-Installation
Stellen Sie sicher, dass Axios in Ihrem React-Projekt installiert ist:

npm install axios

Axios in Reaktionskomponenten verwenden
Beispielsweise möchten wir mit der GET-Methode Daten von einer API abrufen und in einer React-Komponente anzeigen.

1. GET-Anfrage:

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

const App = () => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
        setData(response.data);
        setLoading(false);
      } catch (error) {
        setError(error);
        setLoading(false);
      }
    };

    fetchData();
  }, []);

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

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

export default App;

Erklärung:

• Verwenden Sie useEffect, um die fetchData-Funktion aufzurufen, wenn die Komponente zum ersten Mal geladen wird.
  • axios.get wird verwendet, um Daten von der API-URL abzurufen.
  • Statusdaten, Ladestatus und Fehler werden zum Speichern abgerufener Daten, des Ladestatus und von Fehlern verwendet.

---

1. POST-Anfrage: Um Daten an den Server zu senden, können Sie die POST-Methode wie folgt verwenden:

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

const App = () => {
  const [title, setTitle] = useState('');
  const [body, setBody] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      const response = await axios.post('https://jsonplaceholder.typicode.com/posts', {
        title,
        body,
      });
      console.log('Response:', response.data);
      alert('Post successfully created!');
    } catch (error) {
      console.error('Error posting data:', error);
    }
  };

  return (
    <div>
      <h1>Create a Post</h1>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          placeholder="Title"
          value={title}
          onChange={(e) => setTitle(e.target.value)}
        />
        <textarea
          placeholder="Body"
          value={body}
          onChange={(e) => setBody(e.target.value)}
        ></textarea>
        <button type="submit">Submit</button>
      </form>
    </div>
  );
};

export default App;

Erklärung:

• Die axios.post-Methode wird verwendet, um Titel- und Textdaten an die API zu senden.
• Die handleSubmit-Funktion verarbeitet die Formularübermittlung und sendet Daten an den Server.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Axios in ReactJS – GET- und POST-Anfrage. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!