Express & Vue：POST请求后如何自动更新MongoDB并响应式刷新数据

1. POST请求一直pending的原因及修复 #

你的Node.js后端代码存在两个核心问题：

• 回调函数的参数res覆盖了路由处理函数的响应对象res，导致无法向客户端返回响应
• 插入数据后直接关闭MongoDB连接，且无论成功失败都未给客户端返回任何响应，浏览器持续等待服务器回复，因此请求始终处于pending状态

修改后的index.js代码：

app.post('/addedBook', (req, res) => {
  // 把回调里的res改为result，避免覆盖外层响应对象
  coll.insertOne(req.body, (err, result) => {
    if (!err) {
      // 插入成功后，向客户端返回新添加的书籍数据
      res.status(201).json(result.ops[0]);
      // 不要在此处关闭MongoDB连接，连接应复用而非每次请求都关闭
      // mongoClient.close();
    } else {
      console.log('error', err);
      // 插入失败也要返回错误响应
      res.status(500).json({ error: '插入书籍失败' });
    }
  });
});

注意：MongoDB连接建议在应用启动时建立，后续请求复用该连接，否则关闭连接后后续请求会因无可用连接失败。

2. 前端响应式更新书籍数组的修复 #

前端发送请求后，需将服务器返回的新书籍数据添加到books数组中，Vue的数组方法（如push）是响应式的，添加后视图会自动更新。

修改后的index.vue中fetch部分的代码：

fetch("http://localhost:3000/addedBook", requestOptions)
  .then(response => {
    if (!response.ok) {
      throw new Error('请求失败');
    }
    return response.json();
  })
  .then(newBook => {
    console.log(newBook);
    // 将新添加的书籍push到books数组，触发响应式更新
    this.books.push(newBook);
  })
  .catch(error => console.log('error', error));

确保requestOptions配置了正确的method: 'POST'，设置合适的Content-Type（如application/json），同时将请求体正确序列化为JSON字符串。

内容的提问来源于stack exchange，提问作者Сергей Алексеев