使用 AngularJS 中的 promises 在视图中设置数据，然后在后台处理数据后更新视图

Question

我有一个项目，我从数据库中获取数据并且必须遍历返回的对象树来操作数据，并且由于这些操作非常耗时（大量数据），它会影响页面加载次。

原始-未处理的数据是有用的，所以我想用未处理的数据设置$scope.data对象，然后在处理完成后替换它。

我在想这样的事情：

dataFactory.getAssets()
    .success(function(data) {
        $scope.assets = data; /* sets data in view */
    }
})

.then(function(data) {
    dataFactory.processAssets(data); /* post-processes data*/
    $scope.assets = data; /* sets processed data in view */
})

.error(function(data) {
    $log.log(data.error + ' ' + status);
});

我显然在这里遗漏了一些东西，我们将不胜感激。

基本上我想这样做：

从数据库中获取数据
设置 $scope.view = 数据以在页面上显示原始数据
在页面正在处理时发送要在后台处理的数据已查看
处理完成后将 $scope.view 重置为 = 已处理数据

Answer 1

dataFactory.processAssets 应该 return 一个承诺，并在这个承诺解决后重置视图：

 dataFactory.getAssets().then(function(rawData){

     //get raw data and set to assets
     $scope.assets = rawData;

     //process data
     dataFactory.processAssets(rawData).then(function(data){

         //get processed data and set to assets
         $scope.assets = data
     })
 })

Answer 2

这样试试：

dataFactory.getAssets()
  .then(function(data) {
    $scope.assets = data; /* sets data in view */
  }, function(data) {
    $log.log(data.error);
  })
  .finally(function(data) {
    dataFactory.processAssets(data).then(function(data){
      $scope.assets = data; /* post-processes data*/
    });
  });

Answer 3

链函数与承诺，return数据到处理函数。

dataFactory.getAssets()
    .then(function onFulfilled(data) {
        $scope.assets = data; /* sets data in view */
        //return data for chaining
        return data;
    }
})

.then(function chainedHandler(chainedData) {
    var processedData = dataFactory.processAssets(chainedData);
    $scope.assets = processedData; /* sets processed data in view */
    //return for further chaining
    return processedData;
})

.catch(function onRejected(errorResult) {
    $log.log(errorResult.error + ' ' + status);
});

请注意 .success 和 .error 已弃用并且 忽略 return 值。 请改用 .then 和 .catch 方法，尤其是当您打算 chain promises 时。

The $http legacy promise methods .success and .error have been deprecated. Use the standard .then method instead.¹

因为调用承诺的 .then 方法 return 是一个新的派生承诺，所以很容易创建承诺链。可以创建任意长度的链，并且由于一个 promise 可以用另一个 promise 解决（这将进一步推迟其解决），因此可以 pause/defer 在链中的任何点解决 promise。这使得实现强大的 API 成为可能。²

有关详细信息，请参阅。

使用 AngularJS 中的 promises 在视图中设置数据，然后在后台处理数据后更新视图

Using promises in AngularJS to set data in view, then update view after data processed in background

angularjs

angular-promise