Question

我使用Angular工厂从Feed中检索数据并对其进行一些数据操作。

我希望阻止我的应用呈现第一个视图，直到完成此数据准备。我的理解是我需要为此使用promises，然后在控制器中使用.then调用可以在promise解析后立即运行的函数。

从at examples看，我发现在我的工厂实施承诺非常困难。具体来说，我不知道在哪里推迟和解决。任何人都可以权衡实施一个最好的方法吗？

这是我的工作工厂没有承诺：

angular.module('MyApp.DataHandler', []) // So Modular, much name

.factory('DataHandler', function ($rootScope, $state, StorageHandler) {

  var obj = {

    InitData : function() {

      StorageHandler.defaultConfig = {clientName:'test_feed'};
      StorageHandler.prepData = function(data) {
        var i = 0;
        var maps = StorageHandler.dataMap;

        i = data.line_up.length;
        while(i--) {
         // Do loads of string manipulations here
        }
        return data;
      }

      // Check for localdata
      if(typeof StorageHandler.handle('localdata.favorites') == 'undefined') {
        StorageHandler.handle('localdata.favorites',[]);
      }

    },

  };
  return obj;

});

以下是我在查看示例时所尝试的内容：

angular.module('MyApp.DataHandler', []) // So Modular, much name

.factory('DataHandler', function ($rootScope, $q, $state, StorageHandler) {

  var obj = {

    InitData : function() {

      var d = $q.defer(); // Set defer

      StorageHandler.defaultConfig = {clientName:'test_feed'};
      StorageHandler.prepData = function(data) {
        var i = 0;
        var maps = StorageHandler.dataMap;

        i = data.line_up.length;
        while(i--) {
         // Do loads of string manipulations here
        }
        return data;
      }

      // Check for localdata
      if(typeof StorageHandler.handle('localdata.favorites') == 'undefined') {
        StorageHandler.handle('localdata.favorites',[]);
      }
      return d.promise; // Return promise
    },

  };
  return obj;

});

但是当我在控制器中使用它时，控制台中没有显示任何内容：

DataHandler.InitData()
.then(function () {
  // Successful
  console.log('success');
},
function () {
  // failure
  console.log('failure');
})
.then(function () {
  // Like a Finally Clause
  console.log('done');
});

有什么想法吗？

Answer 1

像弗洛里安提到的那样。您所显示的代码中的异步调用并不明显。

以下是您想要的要点：

angular.module("myApp",[]).factory("myFactory",function($http,$q){
  return {
    //$http.get returns a promise. 
    //which is latched onto and chained in the controller
    initData: function(){
      return $http.get("myurl").then(function(response){
        var data = response.data;
        //Do All your things... 
        return data;
      },function(err){
        //do stuff with the error..
        return $q.reject(err);
        //OR throw err;
        //as mentioned below returning a new rejected promise is a slight anti-pattern, 
        //However, a practical use case could be that it would suppress logging,
        //and allow specific throw/logging control where the service is implemented (controller)            
     });  
    }
  }
}).controller("myCtrl",function(myFactory,$scope){
  myFactory.initData().then(function(data){
    $scope.myData = data;
  },function(err){
    //error loudly
    $scope.error = err.message
  })['finally'](function(){
     //done.
  });
});

Angular：重写函数以使用promise

1 个答案: