ReactJS で Axios を使用する方法 - GET リクエストと POST リクエスト-jsチュートリアル-php.cn

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

Susan Sarandon

リリース： 2024-10-15 12:24:01

オリジナル

1103 人が閲覧しました

Cara Penggunaan Axios di ReactJS - GET dan POST Request

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.

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>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.

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>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: