考虑以下简单的Next.js应用程序:https://codesandbox.io/p/sandbox/next-js-app-router-1bvd7d?file=README.md
我们有一个API路由(/api/hello
):
export default function handler(req, res) {
res.status(204).end();
}
在React服务器组件(RSC)中获取:
export default async function Home() {
let res;
try {
res = await fetch("https://rpvequ-3000.csb.app/api/hello");
console.log("res.status", res.status);
console.log("res", res);
} catch (error) {
console.log("res in error", res);
console.log("error", error);
}
return (
<main>
<p>HELLO WORLD</p>
</main>
);
}
fetch抛出以下错误消息:
TypeError:响应构造函数:无效的响应状态代码204
例如,如果我们将HTTP响应从204更改为202,则fetch不再抛出错误。
为什么我们会得到一个204的错误呢?有没有办法在RSC中检查响应是否是204,这样我们就可以根据需要处理它了?
PS:如果你是在 Codesandbox 或其他地方测试它,记得每次重启dev服务器时删除.next
文件夹(否则fetch()
只使用上次缓存的内容)。
旁注:
React Client 组件中的相同fetch()
由于某种原因 not 抛出错误:
"use client";
import React, { useEffect } from "react";
const ClientComp = ({ children }) => {
useEffect(() => {
let res;
(async () => {
try {
res = await fetch("http://localhost:3000/api/hello");
console.log("res.status", res.status);
console.log("res", res);
} catch (error) {
console.log("res in error", res);
console.log("error", error);
}
})();
}, []);
return <div>{children}</div>;
};
export default ClientComp;
换句话说,状态码为204 only 的HTTP响应在被 React Server Component 中的fetch()
接收时抛出错误,而不是在 React Client Component 中。
1条答案
按热度按时间kdfy810k1#
这是Next.js中的一个错误,在此PR https://github.com/vercel/next.js/pull/48354中得到修复