Cara Mengintegrasikan REST API dalam React dengan fetch dan Axios

Penyatuan API REST dalam React

Menyepadukan REST API ke dalam aplikasi React ialah tugas biasa untuk pembangun web. REST (Pemindahan Negeri Perwakilan) ialah gaya seni bina yang membolehkan anda berinteraksi dengan sumber luaran (data) melalui kaedah HTTP seperti GET, POST, PUT, DELETE, dll. React memudahkan untuk disepadukan dengan REST API, membolehkan anda mengambil data , siarkan data baharu dan kendalikan pelbagai respons API dengan cekap.

Dalam panduan ini, kami akan meneroka cara mengintegrasikan API REST ke dalam apl React menggunakan kaedah berbeza seperti API Ambil, Axios dan mengendalikan pengambilan data tak segerak.

---

1. Mengambil Data daripada REST API

Fungsi fetch() dibina ke dalam JavaScript dan menyediakan cara mudah untuk membuat permintaan HTTP. Ia mengembalikan Janji yang menyelesaikan kepada objek Respons yang mewakili respons kepada permintaan.

Menggunakan API ambil dalam React

Berikut ialah contoh mudah menggunakan API pengambilan untuk mendapatkan data daripada API REST dan memaparkannya dalam komponen React.

import React, { useState, useEffect } from 'react';

const API_URL = 'https://jsonplaceholder.typicode.com/posts'; // Example REST API

const FetchPosts = () => {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    // Fetch data from the API
    fetch(API_URL)
      .then((response) => {
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        return response.json();
      })
      .then((data) => {
        setPosts(data);
        setLoading(false);
      })
      .catch((error) => {
        setError(error.message);
        setLoading(false);
      });
  }, []);

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;

  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <h2>{post.title}</h2>
            <p>{post.body}</p>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default FetchPosts;

• useState: Digunakan untuk menyimpan siaran, keadaan pemuatan dan sebarang mesej ralat.
• useEffect: Mengendalikan pengambilan data apabila komponen dipasang.
• fetch(): Mengambil data daripada titik akhir REST API, kemudian memprosesnya ke dalam format JSON.
• Pengendalian Ralat: Menangkap sebarang ralat (seperti isu rangkaian) dan menetapkan keadaan ralat.

---

2. Menggunakan Axios untuk Permintaan API

Axios ialah klien HTTP berasaskan janji untuk penyemak imbas dan Node.js. Ia merupakan alternatif untuk diambil dan selalunya diutamakan kerana sintaksnya yang lebih bersih dan ciri tambahan seperti transformasi JSON automatik, pembatalan permintaan dan banyak lagi.

Memasang Axios

Untuk menggunakan Axios, pasang dahulu melalui npm:

npm install axios

Menggunakan Axios untuk Mengambil Data

Berikut ialah contoh yang sama seperti di atas tetapi dengan Axios.

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const API_URL = 'https://jsonplaceholder.typicode.com/posts';

const FetchPosts = () => {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    // Fetch data from the API using Axios
    axios
      .get(API_URL)
      .then((response) => {
        setPosts(response.data);
        setLoading(false);
      })
      .catch((error) => {
        setError(error.message);
        setLoading(false);
      });
  }, []);

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;

  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <h2>{post.title}</h2>
            <p>{post.body}</p>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default FetchPosts;

• axios.get(): Mengambil data daripada REST API. Axios menghuraikan respons secara automatik sebagai JSON.
• Pengendalian Ralat: Jika terdapat ralat, ia ditangkap dan dipaparkan dalam komponen.

---

3. Menghantar Data ke REST API (POST Requests)

Selain permintaan GET, anda boleh menghantar data ke pelayan menggunakan permintaan POST. Ini biasanya digunakan untuk menyerahkan borang atau mencipta rekod baharu.

Menggunakan fetch untuk Permintaan POST

import React, { useState, useEffect } from 'react';

const API_URL = 'https://jsonplaceholder.typicode.com/posts'; // Example REST API

const FetchPosts = () => {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    // Fetch data from the API
    fetch(API_URL)
      .then((response) => {
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        return response.json();
      })
      .then((data) => {
        setPosts(data);
        setLoading(false);
      })
      .catch((error) => {
        setError(error.message);
        setLoading(false);
      });
  }, []);

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;

  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <h2>{post.title}</h2>
            <p>{post.body}</p>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default FetchPosts;

• POST request: Menghantar data ke API dalam format JSON. Dalam kes ini, kami menghantar siaran baharu dengan tajuk dan kandungan.
• JSON.stringify(): Menukar objek JavaScript kepada rentetan JSON untuk badan permintaan.

Menggunakan Axios untuk Permintaan POST

npm install axios

• axios.post(): Menghantar permintaan POST ke API. Badan permintaan mengandungi data yang akan dihantar.

---

4. Kesimpulan

Menyepadukan API REST ke dalam aplikasi React ialah kemahiran penting untuk pembangunan web moden. Sama ada anda menggunakan fetch() atau pustaka seperti Axios, React memberikan anda cangkuk berkuasa seperti useEffect dan useState untuk mengurus permintaan API dan mengemas kini UI berdasarkan respons. Anda boleh mengambil data, menghantar data dan mengendalikan ralat dengan anggun, memastikan pengalaman pengguna yang lancar.

---

Atas ialah kandungan terperinci Cara Mengintegrasikan REST API dalam React dengan fetch dan Axios. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!