使用 AJAX 响应来最小化 SPA 中的进一步请求答案

【问题标题】：Using AJAX responses to minimize further requests in SPA使用 AJAX 响应来最小化 SPA 中的进一步请求
【发布时间】：2016-10-05 11:17:30
【问题描述】：

我正在制作一个电子商务应用程序 (MEAN)，并且在发出 AJAX http 请求时一直遇到同样的问题。我使用的是 MEAN，单页架构是这个问题的基础。

我已经读到只有在绝对必要时才应该使用 http 请求，但我想知道这能走多远。我应该收集必要的 http 请求返回的所有信息并使用它来减少进一步的请求，还是这种想法只会导致复杂的代码和很少的性能收益？

例如，我有一个 addToCart 方法，它发出一个post 请求。在post 中，它首先检查product 数据库以确保该商品有足够的库存数量，然后在添加之前检查user 数据库以确保它不在购物车中。

发布请求：

 .post(auth, function(req, res, next){
   var newCartItem = {
    product: req.body._id,
    quantity: req.body.quantity
  };

  function addCartItem(){
    //Checks user.cart.product to ensure that item isn't already in cart
    User.update({username: req.payload.username, 'cart.product': {$ne: newCartItem.product}},
      {$push: {cart: newCartItem}},
      function(err, user){
        if(err){return next(err);}
        if(!user.nModified){
          res.json({message: 'Item is already in your cart.'});
        }else{
          res.json({message: 'Item added to cart', addedProduct: newCartItem});
        }
      }
    );
  }
  //Checks product database to ensure sufficient inventory(quantity)
  Product.update({_id:req.body._id, quantity: {$gte: req.body.quantity}}, {$inc:{quantity: -req.body.quantity}},
    function(err, product){
      if(err) {
        return next(err);
      }else if(product.nModified === 0) {
        res.json({message: 'Product no longer has sufficient quantity in stock.'});
      }else{
        addCartItem();
      }
  });

如果我真的想要最小化 http 请求，我可以让 Product.update 回调将产品信息返回给客户端（在 res.json 内），然后可以将其用于后续检查在发出服务器请求之前，客户端上该特定产品的库存。此外，如果库存充足并且产品已添加到购物车，我可以让User.update 回调返回user.cart，以便客户端知道并验证要添加的项目不在用户的在发送任何后续请求之前购物车。

这类问题起初似乎是一个孤立的案例，直到我开始看到它无处不在。我知道这在某种程度上是基于意见的，但我在很多情况下都遇到了这个基本问题，以至于我冒着被激怒的风险。

重申一下，这是我的问题：我应该收集必要的 http 请求返回的任何可能的信息并使用它来减少进一步的请求，还是这种想法只会导致复杂的代码和很少的性能收益？

干杯！泰勒

【问题讨论】：

标签： javascript ajax mongodb express mean-stack

【解决方案1】：

您在 MEAN 堆栈上，这意味着您需要通过 web 服务（主要是 REST）将数据从后端导出到前端，并且您可以通过在访问某些路由时生成 json 对象轻松做到这一点，从而创建一个RESTful API。
该 API 将通过 $http 或 $resource 模块在 AngularJS 中制作的 SPA 中使用。（angular-resource in not built-in）。
无论哪种方式，您都需要配置状态（而不是路由），以便您的状态机在应用程序中调用与请求状态相关的数据，并且默认情况下它是异步执行的。

如果你真的想用你的 AJAX “停止访问后端”，你需要使用 $provider 因为它只运行一次，并且应用程序将从该数据提供者那里获取数据，而这些数据实际上保存着它从 web 服务获得的数据.（你需要这样做）。

您还想减少 SPA 中的 POST 方法，因为无法减少负载（除非您正在寻找基础设施解决方案 AKA nginx 作为事实上的解决方案..）。
祝你好运..

【讨论】：