Question

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

 
+--------+-------+-------+-------+-------+-------+
| Habit  | Date1 | Date2 | Date3 | Date4 | Date5 |
+--------+-------+-------+-------+-------+-------+
| Habit1 | Y/N   | Y/N   | Y/N   | Y/N   | Y/N   |
| Habit2 | Y/N   | Y/N   | Y/N   | Y/N   | Y/N   |
| Habit3 | Y/N   | Y/N   | Y/N   | Y/N   | Y/N   |
| Habit4 | Y/N   | Y/N   | Y/N   | Y/N   | Y/N   |
| Habit5 | Y/N   | Y/N   | Y/N   | Y/N   | Y/N   |
+--------+-------+-------+-------+-------+-------+

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

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

Answer 1

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

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

中

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

Answer 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>

Angular JS批处理许多小请求

2 个答案: