JavaScript异步函数返回值POST到后端显示为空花括号问题求助

问题原因 #

1. 前端逻辑冲突，index函数的Promise无法在当前点击流程中resolve #

你当前的逻辑顺序完全颠倒：

• 在SendId组件的点击回调里调用index()后，index()内部会先等待2秒，再给.remove元素新增一次点击事件监听
• 这个Promise的resolve触发条件是下一次点击.remove时才会执行，因此当前这次点击的请求发送时，await index()永远处于pending状态，拿不到有效值，序列化后的JSON内容异常
• 另外useEffect没有传空依赖数组，每次组件重渲染都会重复绑定点击事件，会导致同一点击触发多次回调的问题

2. 请求未设置正确的JSON标识头 #

用XMLHttpRequest发送JSON格式请求体时，没有指定Content-Type: application/json，后端服务无法识别请求体格式，自然解析不出内容，只会得到空对象

3. 后端缺少JSON解析中间件 #

Express v4.16+ 版本默认不内置解析JSON请求体的功能，需要主动启用express.json()中间件才能正常读取req.body内容

修复方案 #

第一步：调整前端逻辑，删除冗余的index函数 #

原来的index函数完全不需要，直接在点击回调中取值即可，修改后代码如下：

export default function SendId(){
    // 传入空依赖数组，仅在组件挂载时绑定一次事件
    React.useEffect(() => {
        const PORT = process.env.PORT || 3001;
        $("#noteDisplay").on("click", ".remove", (e) => {
            // 直接在这里获取你需要的index值
            const indexResult = "hello";
            // 如果你需要拿节点ID就放开下面这行
            // const indexResult = e.currentTarget.parentNode.id - 1;
            const index_note = { index: indexResult }
            const data = JSON.stringify(index_note);
        
            const xhr = new XMLHttpRequest();
            xhr.open('POST', `http://localhost:${PORT}/api/1`, true);
            // 新增JSON格式请求头
            xhr.setRequestHeader('Content-Type', 'application/json');
            xhr.send(data);
            console.log("the data was sent")
        });
    }, []);
    return null;
}

第二步：后端启用JSON解析中间件 #

在你Express服务的所有路由注册前，添加中间件注册代码：

// 必须放在所有app.post/app.get路由定义之前
app.use(express.json());

app.post("/api/:1", (req, res) =>{
  console.log(req.body);
  // 记得给前端返回响应，避免请求超时
  res.sendStatus(200);
});

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