NextJS前端调用fetch后后续代码不执行问题求助

前端代码问题 #

1. 错误使用map搭配异步函数
   你在users.map里写了async回调，但map方法不会等待异步函数执行完成，而且map的核心作用是转换数组元素，不是用来遍历查找匹配项。这里应该用find定位到匹配的用户，再处理后续逻辑：

const onSubmit = async (data) => {
    console.log("________");
    const matchedUser = users.find(user => data.email === user.email && data.password === user.password);
    if (matchedUser) {
        console.log("hi");
        try {
            const response = await fetch("http://localhost:3000/api/test");
            // fetch返回的是Response对象，需解析才能拿到接口返回内容
            const result = await response.json();
            console.log("back-end is: ", result);
        } catch (err) {
            console.error("请求出错:", err);
        }
    }
};

另外，onSubmit需要声明为async，否则内部的await会失效。

2. fetch响应处理缺失
   原代码里const data = await fetch(...)得到的是Response对象，不是接口返回的实际数据，必须调用response.json()（返回JSON格式时）或response.text()解析内容。同时要加try/catch捕获请求错误，避免因请求失败导致后续代码直接中断。

后端接口问题 #

你的/api/test接口没有给前端返回任何响应，只是打印日志，这会导致前端的fetch请求一直处于挂起状态，最终超时失败，自然无法执行后续代码。修改后端接口，必须用res对象返回响应：

export default async function student_method(req, res) {
    console.log("get in server");
    // 这里替换成你从数据库查询到的实际数据
    res.status(200).json({ message: "请求成功", data: "数据库返回内容" });
}

核心问题总结 #

• 前端误用map处理异步逻辑导致流程失控，且未正确处理fetch的响应与错误
• 后端接口未返回响应，导致前端请求无法正常完成

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