React 中的資料獲取-js教程-PHP中文網

Data Fetching in 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);
  }
};

登入後複製