數據請求與錯誤處理

數據請求與錯誤處理

在 React 應用中，進行數據請求時妥善處理錯誤是非常重要的。這不僅可以提升用戶體驗，還能幫助你更好地調試和監控應用。下面將詳細介紹如何進行數據請求以及錯誤處理的最佳實踐。

---

1. 使用 Fetch 進行數據請求

1.1 基本的 Fetch 請求

使用 fetch 進行 GET 請求的基本示例：

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

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

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => {
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        return response.json();
      })
      .then(data => {
        setData(data);
        setLoading(false);
      })
      .catch(error => {
        setError(error);
        setLoading(false);
      });
  }, []);

  if (loading) return <p>加載中...</p>;
  if (error) return <p>錯誤: {error.message}</p>;

  return (
    <div>
      <h1>數據:</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

export default DataFetchingComponent;

1.2 錯誤處理

在這個範例中，我們使用 response.ok 來檢查請求是否成功。如果請求失敗，我們會拋出一個錯誤並在 .catch 中處理它。

---

2. 使用 Axios 進行數據請求

2.1 基本的 Axios 請求

使用 axios 進行 GET 請求的基本示例：

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

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

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

  if (loading) return <p>加載中...</p>;
  if (error) return <p>錯誤: {error.message}</p>;

  return (
    <div>
      <h1>數據:</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

export default DataFetchingComponent;

2.2 錯誤處理

使用 Axios 進行錯誤處理也非常簡單。在 .catch 中，我們可以直接捕獲到錯誤，並在 UI 中顯示錯誤信息。

---

3. 錯誤處理的最佳實踐

1. 顯示用戶友好的錯誤信息：
   • 錯誤信息應該簡單明了，避免顯示技術細節。可以顯示一般性提示，如“無法加載數據，請稍後再試。”
2. 提供重試機制：
   • 在捕獲錯誤後，可以提供一個“重試”按鈕，使用戶能夠重新發送請求。

   const handleRetry = () => {
     setLoading(true);
     setError(null);
     // 重新發送請求的邏輯
   };
   
   if (error) {
     return (
       <div>
         <p>錯誤: {error.message}</p>
         <button onClick={handleRetry}>重試</button>
       </div>
     );
   }
   

3. 記錄錯誤信息：
   • 將錯誤記錄到服務器或日誌系統，以便開發人員能夠進行後續分析和調試。

   .catch(error => {
     console.error('發生錯誤:', error);
     // 可在此處發送錯誤日誌到後端
   });
   

4. 區分不同的錯誤類型：
   • 根據不同的錯誤類型（如網絡錯誤、響應錯誤等）提供不同的處理方式和提示。

   .catch(error => {
     if (error.response) {
       // 請求已發送，且服務器響應狀態碼不在 2xx 範圍內
       setError(new Error(`服務器錯誤: ${error.response.status}`));
     } else if (error.request) {
       // 請求已發送，但未收到響應
       setError(new Error('網絡錯誤，請檢查你的連接'));
     } else {
       // 其他錯誤
       setError(new Error('發生錯誤: ' + error.message));
     }
   });
   

5. 使用 Loading 狀態：
   • 在發送請求時，可以顯示加載動畫或指示器，讓用戶知道請求正在進行。

---

4. 總結

• 與 API 進行數據請求時，使用 fetch 或 axios 都是有效的選擇。
• 妥善處理錯誤是提升用戶體驗的關鍵，應提供友好的錯誤信息、重試機制以及良好的錯誤日誌管理。
• 實施這些最佳實踐，可以使你的應用在面對數據請求失敗時更具韌性和友好性。