这两种获取API数据的方法有什么真正的区别？

Question

我正在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块，

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
  }
}

最终结果是方法 2 返回了更完整的 JSON 数据，其中包含我需要的所有内容。然而，第一个方法并不返回所有内容。与第二种方法相比，它只返回一半的数据。

有什么见解吗？ ..谢谢。

我尝试了上述两种方法，我希望方法 1 从 API 返回与方法 2 相同的数据，但显然它返回的数据比预期少。

Answer 1

标头的处理方式有所不同。在第一种方法中，您直接在 fetch 调用中设置标头，但在第二种方法中，您引用 headers 变量，而您没有将其放入代码片段中。同样在第二个代码片段中，您使用“方法：获取”，但在第一个代码片段中没有使用。

所以问题在于你如何处理获取。如果您有相同的方法和标头，结果将是相同的。