如何将Node.js中的数据传递给前端JavaScript？fetch请求返回空对象如何解决

为什么会弹出空对象 #

两个独立的问题叠加导致了你现在的异常：

• 前端逻辑里，fetch默认返回的是Response响应对象，这个对象上的属性大多是不可枚举的，直接用JSON.stringify序列化整个Response对象，根本拿不到真实的响应内容，最终就会输出空的{}
• 后端接口里的console.log(id)存在未定义变量引用，运行到这行代码时接口会直接抛500错误，哪怕前端取数逻辑对了，也拿不到正常的返回值

具体修改步骤 #

修复Node.js端接口逻辑 #

把接口里无意义的未定义id引用删掉，确保接口能正常返回数据：

app.get('/calculateResult',(req,res)=>{
    // 移除会报错的id打印逻辑，直接返回预期的数值
    res.send(5)
})

如果后续需要用到请求里携带的id参数，要从req.query、req.params或者请求体里提取对应字段，不要直接引用未声明的全局变量，否则会直接导致接口崩溃。

修复前端取数逻辑 #

不要直接序列化整个Response对象，要先通过对应方法把响应体的内容解析出来：

const pullLever = async function(){
    const response = await fetch('/calculateResult')
    // 因为后端返回的是纯数字文本，用text()方法解析即可
    const backResult = await response.text()
    alert(backResult)
}

如果后续接口返回JSON格式数据，把解析方法换成await response.json()就能拿到结构化的业务数据，逻辑核心都是：必须等响应体解析完成后，再对拿到的真实业务数据做展示或处理。

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