ReactJS で Axios を使用する方法 - GET リクエストと POST リクエスト

Cara Penggunaan Axios di ReactJS

Pendahuluan

Axios adalah pustaka populer untuk melakukan HTTP request seperti GET, POST, PUT, DELETE, dan lainnya. Axios sangat cocok digunakan di aplikasi React karena menyediakan sintaks yang mudah dan mendukung Promise. Artikel ini akan membahas cara menggunakan Axios di aplikasi ReactJS.

Instalasi Axios
Pastikan Anda telah menginstal Axios di proyek React:

npm install axios

Menggunakan Axios di Komponen React
Misalnya, kita ingin mengambil data dari sebuah API menggunakan metode GET dan menampilkannya di komponen React.

1. GET Request:

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 id="Posts">Posts</h1>
      <ul>
        {data.map((post) => (
          <li key="{post.id}">{post.title}</li>
        ))}
      </ul>
    </div>
  );
};

export default App;

Penjelasan:

• Gunakan useEffect untuk memanggil fungsi fetchData saat komponen pertama kali dimuat.
  • axios.get digunakan untuk mengambil data dari URL API.
  • State data, loading, dan error digunakan untuk menyimpan data yang diambil, status pemuatan, dan kesalahan.

---

1. POST Request: Untuk mengirim data ke server, Anda bisa menggunakan metode POST seperti berikut:

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 id="Create-a-Post">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;

Penjelasan:

• Metode axios.post digunakan untuk mengirim data title dan body ke API.
• Fungsi handleSubmit menangani form submission dan mengirimkan data ke server.

以上がReactJS で Axios を使用する方法 - GET リクエストと POST リクエストの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。