React NextJS App Router 实时获取API

import { useEffect, useState } from 'react';
import Router from 'next/router';
 
// 定义API路由和方法
const API_ROUTES = {
  'GET /api/data': async () => {
    const response = await fetch('/api/data');
    return await response.json();
  }
};
 
// 使用useEffect进行API调用和状态更新
function useLiveApi(route) {
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState(null);
 
  useEffect(() => {
    setIsLoading(true);
    let isCancelled = false;
 
    async function fetchData() {
      try {
        const apiRoute = API_ROUTES[route];
        if (apiRoute) {
          const result = await apiRoute();
          if (!isCancelled) {
            setData(result);
          }
        } else {
          throw new Error('Route not found');
        }
      } catch (error) {
        if (!isCancelled) {
          setError(error);
        }
      } finally {
        if (!isCancelled) {
          setIsLoading(false);
        }
      }
    }
 
    fetchData();
 
    return () => {
      isCancelled = true;
    };
  }, [route]);
 
  return { data, isLoading, error };
}
 
// 使用自定义Hook
function MyComponent() {
  const { data, isLoading, error } = useLiveApi('GET /api/data');
 
  if (error) {
    return <div>Error: {error.message}</div>;
  }
 
  if (isLoading) {
    return <div>Loading...</div>;
  }
 
  return <div>{JSON.stringify(data)}</div>;
}
 
export default MyComponent;

这个代码实例展示了如何在React组件中使用自定义的useLiveApi钩子来实现对API的实时获取。它定义了一个模拟的API路由对象，并在组件中调用该钩子，根据路由获取数据，并展示加载状态和错误处理。这是一个简化的例子，但它展示了如何将实时数据获取集成到React应用程序中的核心概念。