NextJS前端如何获取API返回的响应数据？

你看不到返回的John Doe，核心原因是fetch API和axios的处理逻辑不一样：

• axios会自动把后端返回的JSON响应解析成JavaScript对象，直接通过response.data就能访问数据；
• 但fetch返回的是一个Response对象，这个对象只包含响应的元信息（比如状态码、请求头），你必须手动调用response.json()方法，才能把响应体的JSON数据解析成可直接使用的JS对象。

修改后的前端调用代码 #

链式then写法：

useEffect(() => {
    fetch("/api/hello", { method: "GET" })
        .then(response => response.json()) // 关键：解析JSON响应体
        .then(data => {
            console.log(data); // 输出 { name: 'John Doe' }
            console.log(data.name); // 输出 John Doe
        })
        .catch(error => console.error("请求失败：", error));
}, []);

async/await写法（更易读）：

useEffect(() => {
    const fetchApiData = async () => {
        try {
            const response = await fetch("/api/hello", { method: "GET" });
            const data = await response.json(); // 解析JSON
            console.log(data);
        } catch (error) {
            console.error("请求出错：", error);
        }
    };

    fetchApiData();
}, []);

这个差异和Next.js无关，不管是在Next.js还是Create React App中使用fetch，都需要手动执行JSON解析步骤——之前在CRA里用axios能直接拿数据，只是因为axios帮你做了解析这一步。

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