Angular JS 批处理许多小请求答案

【问题标题】：Angular JS batching many small requestsAngular JS 批处理许多小请求
【发布时间】：2018-02-13 21:56:04
【问题描述】：

我正在 AngularJS 中构建一个习惯跟踪应用程序，用户可以在其中输入他们在一周内执行的习惯。界面是一个表格，看起来像：

+--------+-------+-------+-------+-------+-------+ |习惯 |日期1 |日期2 |日期3 |日期4 |日期5 | +--------+-------+-------+-------+-------+-------+ |习惯1 |是/否 |是/否 |是/否 |是/否 |是/否 | |习惯2 |是/否 |是/否 |是/否 |是/否 |是/否 | |习惯3 |是/否 |是/否 |是/否 |是/否 |是/否 | |习惯4 |是/否 |是/否 |是/否 |是/否 |是/否 | |习惯5 |是/否 |是/否 |是/否 |是/否 |是/否 | +--------+-------+-------+-------+-------+-------+

每个表格单元格 (Y/N) 都可以打开或关闭。每次单击其中一个单元格时，我都会执行 API 请求来更新数据库。这会导致每个会话发送许多小请求。

我的问题是 - 您如何将所有这些请求批处理到一个请求中？在 AngularJs 中处理这种情况的最佳方法是什么？

【问题讨论】：

标签： angularjs rest post optimization http-post

【解决方案1】：

一个简单的解决方案是使用数组来queue 向上请求。

用户每次点击单元格时，您都可以将详细信息存储在queue 中。

一旦数组达到一定大小，您就可以触发对 API 的调用并重置您的 queue。

【讨论】：

如果用户没有将队列填充到一定大小，这些更改不会丢失吗？队列未满，浏览器关闭、刷新或页面发生变化的情况如何处理？
@NSPACE 你可以让setInterval 运行以定期刷新队列

【解决方案2】：

例如，您可以将请求存储在localStorage（页面刷新后不会丢失）和Send，通过$timeout 定期将它们作为一批：

angular.module('app', []).controller('ctrl', function($scope, $timeout) {
  $scope.habbits = [];
  for (var i = 0; i < 5; i++) {
    var temp = { Name: 'Habbit' + (i + 1) };
    for (var j = 0; j < 5; j++)
      temp['Date' + (j + 1)] = undefined;
    $scope.habbits.push(temp);
  }

  //it is not needed at production code, just to overcome code snippet restrictions
  var localStorage = {
    data: {},
    getItem: function(key) {
      return this.data[key];
    },
    setItem: function(key, val) {
      this.data[key] = val;
    }
  }
  
  $scope.process = function(item, key) {
    item[key] = !item[key];    
    var old = JSON.parse(localStorage.getItem('requests'));
    old.push({
      Name: item.Name, Value: item[key], Key: key, id: (new Date()).valueOf()
    });
    localStorage.setItem('requests', JSON.stringify(old));
  }

  function Send(){
     $timeout(function() {
      var old = JSON.parse(localStorage.getItem('requests'));      
      var news = old.filter(function(x) { return !x.done; });
      if (news.length > 0)
        //http request mimic
        $timeout(function(){          
          console.log(JSON.stringify(news));                    
          old = JSON.parse(localStorage.getItem('requests'));
          for(var item of old)
            if(news.filter(function(x){ return x.id == item.id}).length == 1)
              item.done = true;
          localStorage.setItem('requests', JSON.stringify(old));          
          Send();
        }, 1000)
      else
        Send();
    }, 3000) 
  };  
  
  localStorage.setItem('requests', JSON.stringify([]));
  Send();
})

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;  
}
.clickable{
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">
</script>

<table ng-app='app' ng-controller='ctrl'>
  <thead>
    <tr>
      <td>Habit</td>
      <td ng-repeat='(key, value) in habbits[0]' ng-if='key!="Name" && key!="id"'>
        {{key}}
      </td>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat='item in habbits'>
      <td>{{item.Name}}</td>
      <td class='clickable' ng-repeat='(key, value) in item' ng-if='key!="Name" && key!="id"' ng-click='process(item, key)'>
        {{value == undefined ? 'Y/N' : (value ? 'Y' : 'N')}}
      </td>
    </tr>
  </tbody>
</table>

【讨论】：