如何將 React 中的 REST API 與 fetch 和 Axios 集成

React 中的 REST API 整合

將 REST API 整合到 React 應用程式中是 Web 開發人員的常見任務。 REST（表述性狀態傳輸）是一種架構風格，可讓您透過 HTTP 方法（如 GET、POST、PUT、DELETE 等）與外部資源（資料）進行互動。 React 可以輕鬆地與 REST API 集成，從而允許您獲取資料、發布新資料並有效處理各種 API 回應。

在本指南中，我們將探索如何使用 Fetch API、Axios 等不同方法將 REST API 整合到 React 應用程式中，並處理非同步資料擷取。

---

1.從 REST API 取得資料

fetch() 函數內建於 JavaScript 中，提供了發出 HTTP 請求的簡單方法。它傳回一個 Promise，該 Promise 解析為表示對請求的回應的 Response 物件。

在 React 中使用 fetch API

這是一個使用 fetch API 從 REST API 取得資料並將其顯示在 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 id="Posts">Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key="{post.id}">
            <h2 id="post-title">{post.title}</h2>
            <p>{post.body}</p>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default FetchPosts;

• useState：用於儲存貼文、載入狀態和任何錯誤訊息。
• useEffect：掛載組件時處理資料的取得。
• fetch()：從 REST API 端點取得數據，然後將其處理為 JSON 格式。
• 錯誤處理：捕獲任何錯誤（例如網路問題）並設定錯誤狀態。

---

2.使用 Axios 進行 API 請求

Axios 是適用於瀏覽器和 Node.js 的基於 Promise 的 HTTP 用戶端。它是 fetch 的替代方案，通常因其更簡潔的語法和自動 JSON 轉換、請求取消等附加功能而受到青睞。

安裝 Axios

要使用 Axios，先透過 npm 安裝它：

npm install axios

使用axios取得資料

這裡是與上面相同的範例，但使用的是 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 id="Posts">Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key="{post.id}">
            <h2 id="post-title">{post.title}</h2>
            <p>{post.body}</p>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default FetchPosts;

• axios.get()：從 REST API 取得資料。 Axios 會自動將回應解析為 JSON。
• 錯誤處理：如果有錯誤，它會被捕獲並顯示在組件中。

---

3.將資料傳送至 REST API（POST 請求）

除了 GET 請求之外，您還可以使用 POST 請求將資料傳送到伺服器。這通常用於提交表單或建立新記錄。

使用 fetch 進行 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 id="Posts">Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key="{post.id}">
            <h2 id="post-title">{post.title}</h2>
            <p>{post.body}</p>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default FetchPosts;

• POST 請求：以 JSON 格式向 API 傳送資料。在本例中，我們將發送帶有標題和正文的新貼文。
• JSON.stringify()：將 JavaScript 物件轉換為請求正文的 JSON 字串。

使用 Axios 進行 POST 請求

npm install axios

• axios.post()：向 API 發送 POST 請求。請求正文包含要傳送的資料。

---

4.結論

將 REST API 整合到 React 應用程式中是現代 Web 開發的關鍵技能。無論您使用 fetch() 還是 Axios 等函式庫，React 都為您提供了 useEffect 和 useState 等強大的鉤子來管理 API 請求並根據回應更新 UI。您可以優雅地獲取資料、發送資料和處理錯誤，確保流暢的使用者體驗。

---

以上是如何將 React 中的 REST API 與 fetch 和 Axios 集成的詳細內容。更多資訊請關注PHP中文網其他相關文章！