Cara Menggunakan Axios dalam ReactJS - Permintaan GET dan POST

Cara Menggunakan Axios dalam ReactJS

pengenalan

Axios ialah perpustakaan popular untuk melaksanakan permintaan HTTP seperti GET, POST, PUT, DELETE dan lain-lain. Axios sangat sesuai digunakan dalam aplikasi React kerana ia menyediakan sintaks yang mudah dan menyokong Promises. Artikel ini akan membincangkan cara menggunakan Axios dalam aplikasi ReactJS.

Pemasangan Axios
Pastikan anda telah memasang Axios dalam projek React anda:

npm install axios

Menggunakan Axios dalam Komponen React
Contohnya, kami ingin mendapatkan semula data daripada API menggunakan kaedah GET dan memaparkannya dalam komponen React.

1. DAPATKAN Permintaan:

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 apabila komponen mula-mula dimuatkan.
  • axios.get digunakan untuk mendapatkan semula data daripada URL API.
  • Data keadaan, pemuatan dan ralat digunakan untuk menyimpan data yang diambil, keadaan pemuatan dan ralat.

---

1. Permintaan POS: Untuk menghantar data ke pelayan, anda boleh menggunakan kaedah 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:

• Kaedah axios.post digunakan untuk menghantar data tajuk dan kandungan ke API.
• Fungsi handleSubmit mengendalikan penyerahan borang dan menghantar data ke pelayan.

Atas ialah kandungan terperinci Cara Menggunakan Axios dalam ReactJS - Permintaan GET dan POST. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!