Haben Sie schon einmal diese beliebte Bibliothek genutzt? Wenn nicht, sind Sie hier genau richtig. In diesem Artikel erkläre ich einfach, wie man mit Axios Daten abruft und anzeigt. Los geht's!!

Axios ist eine beliebte Bibliothek für HTTP-Anfragen. Axios ermöglicht uns die einfache Kommunikation mit APIs in unseren Reaktions-Apps. Es gibt viele Einsatzmöglichkeiten von Axios, aber insgesamt ist Axios eine vielseitige Bibliothek, die die Verarbeitung verschiedener Arten von HTTP-Anfragen in Reaktionsanwendungen einfach macht.

Für die Verwendung können Sie die folgenden Schritte ausführen:

Schritt 1: Erstellen Sie ein ReactJS-Projekt

Im ersten Schritt müssen wir ein ReactJS-Projekt erstellen. Erstellen Sie eines mit der folgenden Befehlszeile:

mit cra

npx create-react-app (your project name)
cd (your project name)
npm start

npm create vite
? Project name: (your project name)
? Select a framework: React
? Select a variant: Javascript
cd (your project name)
npm install
npm run dev

Als nächstes installieren wir Axios mit dem folgenden Befehl

npm install axios

Importieren Sie nun Axios wie im folgenden Beispiel in Ihre Datei

import axios from "axios"

Stellen Sie eine GET-Anfrage

Die GET-Methode ist eine HTTP-Anfrage zum Abrufen von Ressourcen vom Server. Mit der folgenden Methode können wir eine GET-Anfrage senden und Daten rendern:

import axios from "axios";
import React, { useEffect, useState } from "react";
import "./App.css";

function App() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    axios
      .get("https://jsonplaceholder.typicode.com/posts")
      .then((result) => {
        console.log(result.data);
        setPosts(result.data);
      })
      .catch((error) => console.log(error));
  }, []);

  return (
    <div>
      {posts.map((data) => {
        return (
          <div key={data.id}>
            <h4>{data.title}</h4>
            <p>{data.body}</p>
          </div>
        );
      })}
    </div>
  );
}

export default App;

Beachten Sie, dass die URL mit endet /todo/1. Das Post-Objekt wird mit abgerufen "id": 1.

import axios from "axios";
import React, { useEffect, useState } from "react";
import "./App.css";

function App() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    axios
      .get("https://jsonplaceholder.typicode.com/posts/1")
      .then((result) => {
        console.log(result.data);
        setPosts(result.data);
      })
      .catch((error) => console.log(error));
  }, []);

  return (
    <div className="container">
      <h4>{posts.title}</h4>
      <p>{posts.body}</p>
    </div>
  );
}

export default App;

      

       only data with “id: 1” will appear