Pernahkah Anda menggunakan perpustakaan populer ini? jika belum, anda datang ke artikel yang tepat. Pada artikel ini, saya hanya akan menjelaskan Cara mengambil data dengan Axios dan menampilkannya, Ayo!!

Axios adalah perpustakaan populer yang digunakan untuk membuat permintaan HTTP. Axios memungkinkan kami berkomunikasi dengan API dengan mudah di aplikasi reaksi kami. Ada banyak kegunaan Axios namun secara keseluruhan, Axios merupakan library serbaguna yang memudahkan untuk menangani berbagai jenis request HTTP di aplikasi react.

untuk penggunaannya anda dapat mengikuti langkah-langkah berikut:

Langkah 1: Buat Proyek ReactJS

Langkah pertama, kita perlu membuat Proyek ReactJS. Buat satu menggunakan baris perintah berikut:

dengan 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

Selanjutnya, kita akan menginstal Axios menggunakan perintah di bawah ini

npm install axios

Sekarang, impor Axios di file Anda seperti contoh berikut

import axios from "axios"

Buat permintaan GET

Metode GET adalah permintaan HTTP untuk mendapatkan sumber daya dari server. Kami dapat mengirim permintaan GET dan merender data menggunakan metode di bawah ini:

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;

Perhatikan bahwa URL diakhiri dengan /todo/1. Ini akan mengambil objek posting dengan "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