Angular+MongoDB+Express添加购物车时遇重复键错误及重复请求

一、两次请求的根源排查 #

先定位重复请求的触发原因，从以下几个方向检查：

• 订阅重复：检查组件调用addProductToCart的逻辑，是否同时存在手动subscribe()和模板中的async管道。比如组件里调用了service.addProductToCart(...).subscribe()，模板又用了{{ service.addProductToCart(...) | async }}，这会触发两次订阅，导致两次请求。
• 事件绑定重复：检查添加购物车按钮的点击事件，是否存在双重绑定（比如模板<button (click)="addToCart()">同时，组件通过Renderer2或其他方式额外添加了点击监听）。
• 变更检测触发多次：如果组件使用默认的ChangeDetectionStrategy.Default，某些操作可能触发多次变更检测，进而重复调用请求方法。可以临时在调用方法时加日志，确认是否被多次执行，或者改用ChangeDetectionStrategy.OnPush策略减少不必要的检测。

二、真实后端的错误修复 #

1. 重复键错误原因 #

你直接将从Products查询到的完整文档插入carts集合，该文档自带原商品的_id（MongoDB默认唯一索引），第一次请求插入后，第二次请求再插入同一_id的文档就会触发重复键错误。

2. 后端代码的核心问题与修复 #

• 避免重复连接MongoDB：Mongoose会自动管理连接池，不需要在每个请求中调用mongoose.connect，应在应用启动时（如app.js）只执行一次连接操作。
• 规范操作集合：使用Mongoose模型操作carts集合，而非直接调用db.collection，同时不要复用原商品的_id，让MongoDB自动生成购物车条目的唯一_id。
• 错误响应必须返回：原代码中插入出错时仅打印日志，未向客户端返回响应，导致请求一直处于pending状态。
• 处理重复购物车条目：插入前先检查是否已有相同商品+尺码的条目，避免重复插入。

修改后的后端示例代码：

// 确保已在项目入口文件（如app.js）中完成MongoDB连接：
// const mongoose = require('mongoose');
// mongoose.connect(mongoURI);

// 引入Cart模型（需提前定义，包含productId、size、quantity等字段）
const Cart = require('../models/Cart');
const Products = require('../models/Products');

router.post('/getProducts/addtocart/:id', async(req, res) => {
  const productId = req.params.id;
  const { size } = req.body.products;

  try {
    // 检查是否已有相同商品+尺码的购物车条目
    const existingCartItem = await Cart.findOne({ productId, size });
    if (existingCartItem) {
      // 存在则更新数量（根据业务需求调整）
      existingCartItem.quantity += 1;
      const updatedItem = await existingCartItem.save();
      return res.status(200).json(updatedItem);
    }

    // 查询原商品信息
    const targetProduct = await Products.findById(productId);
    if (!targetProduct) {
      return res.status(404).json({ message: '商品不存在' });
    }

    // 创建新的购物车条目（自动生成新_id）
    const newCartItem = new Cart({
      productId: targetProduct._id,
      name: targetProduct.name,
      price: targetProduct.price,
      size: size,
      quantity: 1
    });

    const savedItem = await newCartItem.save();
    res.status(200).json(savedItem);
  } catch (err) {
    console.error('购物车添加失败:', err);
    res.status(400).json({ message: err.message });
  }
});

三、前端代码优化 #

原代码使用Object.defineProperties修改传入的products原对象，可能导致原数据被污染（比如商品列表中的数据被意外修改），建议创建新对象传递请求体：

addProductToCart(products: Products, _id: string, valueSize: string): Observable<Products> {
  // 复制原商品数据并添加size属性，不修改原对象
  const productWithSize = {
    ...products,
    size: valueSize
  };

  return this.http.post<any>(`${this.rootUrl}/getProducts/addtocart/${_id}`, { products: productWithSize });
}

四、验证方法 #

在浏览器Network面板中查看两次请求的Initiator字段，可精准定位请求的发起源；同时在前端服务方法中添加console.log('发起添加购物车请求')，确认是否被调用两次。

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