React 中的資料獲取

資料擷取是 React 應用程式的基礎，支援載入使用者資料、動態渲染內容等功能。 React 提供了一個靈活的資料處理生態系統，可以根據應用程式的複雜性和效能需求選擇各種函式庫和方法。在本文中，我們將探討 React 中資料取得的幾個關鍵方法，包括 Fetch API、Axios、Async/Await、React Query、SWR 和 GraphQL。

---

1. 使用 Fetch API 取得資料

Fetch API 是一個內建的 Web API，它使網路請求更加簡單，並受到現代瀏覽器的廣泛支援。它傳回一個 Promise，該 Promise 使用表示 API 請求中的資料的 Response 物件進行解析。

例子

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

const FetchExample = () => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('https://jsonplaceholder.typicode.com/posts');
        if (!response.ok) throw new Error('Network response was not ok');
        const data = await response.json();
        setData(data);
      } catch (error) {
        setError(error.message);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  return (
    <div>
      {loading ? <p>Loading...</p> : data.map((item) => <p key={item.id}>{item.title}</p>)}
      {error && <p>Error: {error}</p>}
    </div>
  );
};

何時使用 Fetch API

• 小型專案或具有基本資料擷取需求的專案。
• 與基於瀏覽器的應用程式的最小依賴性和相容性。

---

2. 使用axios取得資料

Axios 是一個基於 Promise 的 HTTP 用戶端，適用於瀏覽器和 Node.js，它提供比 Fetch API 更多的功能，例如請求和回應攔截器以及轉換請求和回應的能力。

例子

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

const AxiosExample = () => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    axios
      .get('https://jsonplaceholder.typicode.com/posts')
      .then((response) => {
        setData(response.data);
        setLoading(false);
      })
      .catch((error) => {
        setError(error.message);
        setLoading(false);
      });
  }, []);

  return (
    <div>
      {loading ? <p>Loading...</p> : data.map((item) => <p key={item.id}>{item.title}</p>)}
      {error && <p>Error: {error}</p>}
    </div>
  );
};

Axios 的好處

• 支援可能不完全支援 Fetch API 的舊版瀏覽器。
• 透過拒絕 HTTP 錯誤代碼提供更好的錯誤處理。
• 允許簡單的請求和回應轉換，使其在更大、更複雜的應用程式中流行。

---

3. 使用 Async/Await 語法以獲得更好的可讀性

使用 async 和await，在 JavaScript 中處理非同步程式碼變得更加清晰。 Fetch API 和 Axios 都可以使用 async/await 語法，讓程式碼更容易閱讀。

取得範例

const fetchData = async () => {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts');
    const data = await response.json();
    setData(data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
};

非同步/等待的好處

• 提高了可讀性，並且比承諾鏈更容易處理。
• 允許我們使用 try/catch 區塊進行錯誤處理。

---

4. React Query：強大的資料取得與快取庫

React Query 處理伺服器狀態的快取、同步和更新，讓您輕鬆取得、更新和快取資料。 React Query 的自動資料快取和重新取得使其成為複雜應用程式的流行選擇。

例子

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

const FetchExample = () => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('https://jsonplaceholder.typicode.com/posts');
        if (!response.ok) throw new Error('Network response was not ok');
        const data = await response.json();
        setData(data);
      } catch (error) {
        setError(error.message);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  return (
    <div>
      {loading ? <p>Loading...</p> : data.map((item) => <p key={item.id}>{item.title}</p>)}
      {error && <p>Error: {error}</p>}
    </div>
  );
};

React 查詢的好處

• 資料快取和後台刷新。
• 與 API 整合良好，並處理網路故障的重試邏輯。
• 減少了管理載入、錯誤和重新取得狀態的程式碼。

---

5. Vercel 的 SWR（Stale-While-Revalidate）

SWR 是另一個資料取得庫，它優先考慮快取和重新驗證策略。 SWR 由 Vercel 開發，每當用戶重新訪問頁面時，它都會在後台自動重新獲取數據，從而保持數據最新。

例子

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

const AxiosExample = () => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    axios
      .get('https://jsonplaceholder.typicode.com/posts')
      .then((response) => {
        setData(response.data);
        setLoading(false);
      })
      .catch((error) => {
        setError(error.message);
        setLoading(false);
      });
  }, []);

  return (
    <div>
      {loading ? <p>Loading...</p> : data.map((item) => <p key={item.id}>{item.title}</p>)}
      {error && <p>Error: {error}</p>}
    </div>
  );
};

駐波比的好處

• 使用快取優先的資料取得和自動後台重新驗證。
• 與流行的後端框架和 RESTful API 整合。
• 非常適合需要用最少的程式碼保持資料最新的應用程式。

---

6. 使用 GraphQL 取得數據

GraphQL 是一種 API 查詢語言，可以更好地控制傳回的資料。它允許您僅獲取所需的字段，這可以透過減少過度獲取或獲取不足來提高效能。

Apollo 客戶端範例

要開始使用 Apollo Client，請透過執行 npm install @apollo/client graphql 來安裝它。

const fetchData = async () => {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts');
    const data = await response.json();
    setData(data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
};

GraphQL 的好處

• 透過控制檢索的欄位實現更有效率的資料取得。
• 減少網路負載，特別有利於複雜或巢狀資料。
• 與 Apollo Client 等庫良好集成，改善開發者體驗。

---

結論

在 React 中選擇正確的資料擷取方法取決於您專案的複雜性、效能需求以及您對程式庫和工具的偏好。這是一個快速總結：

• Fetch API：適用於小型專案；內建且最小。
• Axios：更進階的 HTTP 用戶端，具有更好的錯誤處理能力。
• Async/Await：提高非同步程式碼的可讀性和可管理性。
• React Query：非常適合快取、後台重新取得和伺服器狀態管理。
• SWR：重新驗證時過時策略，非常適合取得新資料。
• GraphQL with Apollo：最適合需要特定欄位的複雜資料需求。

以上是React 中的資料獲取的詳細內容。更多資訊請關注PHP中文網其他相關文章！