native-data-fetching 是做什麼的？
在實作或除錯任何網路請求、API 呼叫或資料擷取時使用。涵蓋 fetch API、React Query、SWR、錯誤處理、快取、離線支援以及 Expo Router 資料載入器（useLoaderData）。
概述
此技能提供了一套全面的指南，幫助你在 Expo 與 React Native 專案中實作和除錯資料擷取邏輯。它涵蓋了從原生 fetch 到現代化資料管理解決方案（如 React Query 與 SWR）的各種方法。
核心功能
- Fetch API: 使用
fetch進行基本網路請求，包含錯誤處理與自訂標頭。 - React Query: 使用
@tanstack/react-query管理伺服器狀態，包括查詢、突變（mutations）、快取與背景重新擷取。 - SWR: 使用
swr套件進行資料擷取，結合快取驗證（stale-while-revalidate）策略。 - 錯誤處理: 統一的錯誤處理機制，包括網路錯誤、HTTP 錯誤狀態碼以及應用程式邏輯錯誤。
- 快取: 設定記憶體快取、持久化快取（如使用 AsyncStorage）以及自動重新驗證。
- 離線支援: 實作網路偵測、佇列離線請求，並在恢復連線時同步。
- Expo Router 載入器: 與
useLoaderData整合，以在路由層面進行資料擷取與載入狀態管理。
使用方法
// 使用 fetch API 的基本範例
async function fetchUserData(userId: string) {
try {
const response = await fetch(`https://api.example.com/users/${userId}`);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
return data;
} catch (error) {
console.error('Failed to fetch user data:', error);
throw error;
}
}
// 使用 React Query 的範例
import { useQuery } from '@tanstack/react-query';
function useUserData(userId: string) {
return useQuery({
queryKey: ['user', userId],
queryFn: () => fetchUserData(userId),
staleTime: 5 * 60 * 1000, // 5 分鐘內視為新資料
cacheTime: 10 * 60 * 1000, // 快取保留 10 分鐘
});
}
// 使用 Expo Router 資料載入器
import { useLoaderData } from 'expo-router';
export async function loader() {
const data = await fetchUserData('123');
return { user: data };
}
export default function UserScreen() {
const { user } = useLoaderData();
return <Text>{user.name}</Text>;
}
離線支援
在離線時，你可以使用 @react-native-community/netinfo 監聽網路狀態，並將請求加入佇列，直到連線恢復。
import NetInfo from '@react-native-community/netinfo';
NetInfo.addEventListener(state => {
console.log('Connection type', state.type);
console.log('Is connected?', state.isConnected);
});
錯誤處理
始終在 catch 區塊中處理錯誤，並考慮向使用者顯示友善的錯誤訊息。你也可以使用 React Query 的 onError 回呼來處理全域錯誤。
快取策略
- React Query: 使用
staleTime控制資料過期時間，cacheTime控制快取保留時間。 - SWR: 使用
dedupingInterval避免重複請求，並搭配errorRetryCount設定重試次數。 - 手動快取: 使用
AsyncStorage儲存解析後的資料，以加速後續載入。