NextJS 14 API 数据获取：两种方法如何决定你请求的成败？

2024-03-16 02:10:11

NextJS 14 中 API 数据获取：两种方法的关键差异

对于经验丰富的 NextJS 开发人员来说，在处理来自第三方 API 的数据时，了解不同的数据获取方法至关重要。本文将深入探讨 NextJS 14 中可用的两种主要方法，重点关注它们之间的关键差异、数据处理方式以及最佳实践。

两种 API 数据获取方法

方法 1：路由处理程序（位于 `/api` 文件夹中）

export async function GET() {
  const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/Client/GetAll`, {
    headers: {
      Authorization: `Bearer ${process.env.NEXT_PUBLIC_API_TOKEN}`,
    },
  });
  const data = await res.json();

  return NextResponse.json({ data });
}

方法 2：使用 `try/catch` 块

const headers = new Headers();
headers.append('Authorization', `Bearer ${process.env.NEXT_PUBLIC_API_TOKEN}`);

export async function GET() {
    try {
      const url = `${process.env.NEXT_PUBLIC_API_URL}/Client/GetAll`;
      const response = await fetch(url, {
        method: 'GET',
        headers: headers,
      });
  
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
  
      const data = await response.json();
      return NextResponse.json({ data });
    } catch (error) {
      throw error; // Rethrow the error to handle it in the calling component
    }
}

关键差异

这两种方法在错误处理方式上存在主要差异：

方法 1： 当请求失败时，不会显式处理错误，导致未捕获的异常，可能导致应用程序崩溃。
方法 2： 使用 try/catch 块显式处理错误，捕获异常并重新抛出，允许你更好地处理和报告错误。

数据差异

在某些情况下，方法 1 可能会在 API 响应返回之前就终止请求，导致不完整的数据。相比之下，方法 2 会捕获错误，确保即使在请求失败时也能返回数据或提供有意义的错误消息。

最佳实践

对于可靠的 API 数据获取，强烈建议使用 方法 2 ，因为它提供更好的错误处理，允许你优雅地处理请求失败的情况，并为用户提供清晰的信息。

结论

在 NextJS 14 中处理第三方 API 数据时，了解不同方法之间的差异至关重要。根据错误处理需求和所需的数据完整性水平，选择合适的策略。方法 2，利用 try/catch 块，为可靠和健壮的数据获取提供了最佳实践。

常见问题解答

我可以在不使用 NextResponse.json() 的情况下返回数据吗？
- 可以，但你必须使用 return new Response() 并在响应中设置适当的标头和正文。
我可以使用 async/await 语法来获取 API 数据吗？
- 是的，你可以，这是在方法 2 中实现的。
我如何处理 API 身份验证？
- 在请求标头中包含授权令牌，如方法 1 和方法 2 中所示。
如何处理跨域请求？
- 在服务器端配置 CORS 标头，以允许跨域请求。
推荐使用第三方库来获取 API 数据吗？
- 虽然有第三方库可用，但 NextJS 提供了内置的功能，可以有效地处理 API 数据获取。