reactjs 在NextJS 13.4 API中使用NextResponse、Response或NextAPIResponse返回GET和Data？

bvhaajcl 于 2023-11-18 发布在 React

关注(0)|答案(2)|浏览(450)

在NextJS中搜索返回API响应的正确方法，可以得到各种各样的答案。我怀疑有些答案可能与从13.4之前到13.4的过渡有关。然而，我将分享我的实验，说明哪些方法有效，哪些方法值得推荐。

export async function GET(request) { 

  // WILL EXPERIMENT WITH THESE 6 return types in 13.4
  return NextResponse.json({ message: 'Hello - GET' });
  return NextResponse.status(200).json({ message: 'Hello - GET' });
 
  return Response.json({ message: 'Hello - GET' });
  return Response.status(200).json({ message: 'Hello - GET' });
  
  return NextAPIResponse.json({ message: 'Hello - GET' });
  return NextAPIResponse.status(200).json({ message: 'Hello - GET' });
}

字符串
我正在通过此testMethod接收响应

const testMethod = async () => {
   const response = await fetch("/api/testNextJSAPI", {
      method: "GET",
   });
   if (response.ok) {
      console.log("OKAY");
   } else {
      console.log("ERROR");
   }
};

型

reactjs

来源：https://stackoverflow.com/questions/77332669/use-nextresponse-response-or-nextapiresponse-in-returning-get-and-data-in-next

2条答案

按热度按时间

6l7fqoea1#

为了发送状态码，您需要将其放在第二个参数中

return Response.json({ message: "Hello - GET" }, { status: 200 });
return NextResponse.json({ message: "Hello - GET" }, { status: 200 });

字符串
NextResponse和Response之间的区别在于NextResponse通过额外的便利方法扩展了Web Response API。因此，如果您没有任何特定需求，使用Web Response API就足够了。
参考：https://nextjs.org/docs/app/api-reference/functions/next-response#json

赞(0）回复(0）举报 2023-11-18

jtw3ybtb2#

在实验和交叉引用文档中，最好的方法是

return Response.json({ message: 'Hello - GET' });

字符串
我将在下面做具体的标记，因为它不是唯一一个实际工作的。Response和NextResponse都可以工作。注意，直接附加.status（200）在任何情况下都不起作用。

export async function GET(request) { 

  // WILL EXPERIMENT WITH THESE 6 return types in 13.4

  // USING NEXTRESPONSE
  // * this works - but isn't generally highlighted in docs https://nextjs.org/docs/app/building-your-application/routing/route-handlers
  return NextResponse.json({ message: 'Hello - GET' });
  // ! WRONG - this does not work
  // return NextResponse.status(200).json({ message: 'Hello - GET' });

  // USING RESPONSE
  // (USE THIS ONE)
  // * this works - and is highlighted in docs https://nextjs.org/docs/app/building-your-application/routing/route-handlers
  return Response.json({ message: 'Hello - GET' });
  // ! WRONG - this does not work
  // return Response.status(200).json({ message: 'Hello - GET' });
  
  // *** USING NEXT API RESPONSE NOW
  // ! WRONG - this does not work
  // return NextAPIResponse.json({ message: 'Hello - GET' });
  // ! WRONG - this does not work
  // return NextAPIResponse.status(200).json({ message: 'Hello - GET' });
}

型
NextResponse和Response具有类似的行为并不令我感到惊讶，因为NextResponse扩展了Web Response API，如here文档所示。
我的理解是，NextAPIResponse是node的http.ServerResponse的专门扩展，它添加了一些帮助方法，使发送json（），设置cookie和发送不同的响应类型变得更容易。
和大图片，似乎Pages Routing -> NextAPIResponse和App Routing -> NextResponse。然而，我想更高层次的看法，为什么这切换。

赞(0）回复(0）举报 2023-11-18

我来回答

reactjs 在NextJS 13.4 API中使用NextResponse、Response或NextAPIResponse返回GET和Data？

2条答案

相关问题

热门标签

最新问答