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);
});

我显然在这里遗漏了一些东西，任何帮助都会受到赞赏。

基本上我想这样做：

数据库中的getData
设置$ scope.view = data以显示页面上的原始数据
在页面出现时发送要在后台处理的数据观察
在处理完成时将$ scope.view重置为=已处理的数据

Answer 1

使用promises 链函数，将数据返回到处理函数。

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 已弃用且忽略返回值。使用.then和{{1相反，特别是如果你打算链承诺。

已弃用.catch遗留承诺方法$http和.success。请改用标准.error方法。¹

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

有关详细信息，请参阅Angular execution order with $q。

Answer 2

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

 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 3

试试这样：

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*/
    });
  });

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

3 个答案: