Hai mai usato questa famosa libreria? in caso contrario, sei arrivato all'articolo giusto. In questo articolo, spiegherò semplicemente come recuperare i dati con Axios e visualizzarli, andiamo!!

Axios è una popolare libreria utilizzata per effettuare richieste HTTP. Axios ci consente di comunicare facilmente con le API nelle nostre app di reazione. Ci sono molti usi di Axios ma, nel complesso, Axios è una libreria versatile che semplifica la gestione di vari tipi di richieste HTTP nelle applicazioni di reazione.

per il suo utilizzo puoi seguire questi passaggi:

Passaggio 1: creare un progetto ReactJS

Il primo passo, dobbiamo creare un progetto ReactJS. Creane uno utilizzando la seguente riga di comando:

con 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

Successivamente, installeremo Axios utilizzando il comando seguente

npm install axios

Ora, importa Axios nel tuo file come nell'esempio seguente

import axios from "axios"

Fai una richiesta GET

Il metodo GET è una richiesta HTTP per ottenere risorse dal server. Possiamo inviare una richiesta GET e rendere i dati utilizzando il metodo seguente:

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;

Tieni presente che l'URL termina con /todo/1. Recupererà l'oggetto post con "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;