NextJS中如何对getStaticProps内的多个API调用进行独立错误处理

我来帮你搞定这个问题！在Next.js的getStaticProps里给每个API调用单独处理错误，核心是给每个请求单独加错误捕获逻辑，避免一个请求失败导致整个页面无法生成。下面是具体的实现方案：

步骤1：封装带错误处理的通用Fetch函数 #

首先，我们可以封装一个复用的fetch函数，它会自动处理网络错误和HTTP错误（比如404、500），并返回包含数据或错误信息的对象：

async function fetchWithErrorHandling(url) {
  try {
    const res = await fetch(url);
    // 检查HTTP响应状态，非2xx的状态码抛出错误
    if (!res.ok) {
      throw new Error(`HTTP error! status: ${res.status}`);
    }
    const data = await res.json();
    return { data, error: null };
  } catch (err) {
    console.error(`请求${url}失败:`, err.message);
    return { data: null, error: err.message };
  }
}

步骤2：在getStaticProps中调用这个函数处理每个API请求 #

接下来，在你的getStaticProps里，用这个封装好的函数分别处理两个API调用，每个请求的错误都会被单独捕获，不会影响其他请求：

export async function getStaticProps(context) {
  const fund = context.params.fund;
  
  // 单独处理第一个API请求
  const avggReturns = await fetchWithErrorHandling(
    `https://localhost:8000/avggaut/?name=${fund}`
  );
  
  // 单独处理第二个API请求
  const navPlot = await fetchWithErrorHandling(
    `https://localhost:8000/navplot/?name=${fund}`
  );

  return {
    props: {
      fund,
      avggReturnsData: avggReturns.data,
      avggReturnsError: avggReturns.error,
      navPlotData: navPlot.data,
      navPlotError: navPlot.error,
    },
  };
}

步骤3：在页面组件中处理错误状态 #

最后，在你的页面组件里，你可以根据每个API的错误状态，展示对应的内容（比如错误提示或者正常数据）：

export default function FundPage({ 
  fund, 
  avggReturnsData, 
  avggReturnsError, 
  navPlotData, 
  navPlotError 
}) {
  return (
    <div>
      <h1>{fund} 详情</h1>
      
      <section>
        <h2>平均收益</h2>
        {avggReturnsError ? (
          <p className="error">加载失败: {avggReturnsError}</p>
        ) : avggReturnsData ? (
          <pre>{JSON.stringify(avggReturnsData, null, 2)}</pre>
        ) : (
          <p>无数据</p>
        )}
      </section>

      <section>
        <h2>净值走势</h2>
        {navPlotError ? (
          <p className="error">加载失败: {navPlotError}</p>
        ) : navPlotData ? (
          <pre>{JSON.stringify(navPlotData, null, 2)}</pre>
        ) : (
          <p>无数据</p>
        )}
      </section>
    </div>
  );
}

为什么这么做？ #

• 隔离错误影响：每个API请求的错误被单独捕获，一个请求失败不会导致整个页面无法生成（原来的代码中只要一个请求失败，整个getStaticProps就会抛出异常，页面会显示500错误）。
• 明确错误信息：可以在页面中针对每个模块单独展示错误提示，提升用户体验。
• 代码复用：封装的fetchWithErrorHandling函数可以在其他需要单独处理错误的地方复用。

内容的提问来源于stack exchange，提问作者PRASANTH BATTULA