¿Alguna vez has usado esta popular biblioteca? si no, has venido al artículo correcto. En este artículo, simplemente explicaré cómo obtener datos con Axios y mostrarlos. ¡Vamos!

Axios es una biblioteca popular utilizada para realizar solicitudes HTTP. Axios nos permite comunicarnos fácilmente con las API en nuestras aplicaciones de reacción. Hay muchos usos de Axios pero, en general, Axios es una biblioteca versátil que facilita el manejo de varios tipos de solicitudes HTTP en aplicaciones de reacción.

para su uso puedes seguir estos pasos:

Paso 1: crea un proyecto ReactJS

El primer paso, necesitamos crear un Proyecto ReactJS. Cree uno usando la siguiente línea de 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

A continuación, instalaremos Axios usando el siguiente comando

npm install axios

Ahora, importe Axios en su archivo como el siguiente ejemplo

import axios from "axios"

Hacer una solicitud GET

El método GET es una solicitud HTTP para obtener recursos del servidor. Podemos enviar una solicitud GET y procesar datos usando el siguiente método:

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;

Tenga en cuenta que la URL termina con /todo/1. Recuperará el objeto de la publicación 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;

      

       only data with “id: 1” will appear