角：重写功能，使用承诺 [英] Angular: Rewriting function to use promise

问题描述

我使用的是角的工厂，从饲料中获取数据并执行它的一些数据操作。

I'm using an Angular factory that retrieves data from a feed and does some data manipulation on it.

我想从渲染第一个视图，直到数据preparation做是阻止我的应用程序。我的理解是，我需要用承诺这一点，然后在控制器配合使用。然后调用，可以立即运行功能的承诺解决。

I'd like to block my app from rendering the first view until this data preparation is done. My understanding is that I need to use promises for this, and then in a controller use .then to call functions that can be run as soon as the promise resolves.

从寻找在的范例我发现很难实现在我厂的承诺。具体我不知道放在哪里推迟并解决。任何人都可以在权衡什么是实现一个最好的方法是什么？

From looking at examples I'm finding it very difficult to implement a promise in my factory. Specifically I'm not sure where to put the defers and resolves. Could anyone weigh in on what would be the best way to implement one?

下面是我的工作无厂承诺：

Here is my working factory without promise:

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;

});

下面是我从看例子尝试：

Here's what I tried from looking at examples:

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;

});

但没有什么是在控制台中显示，当我用这个在我的控制器：

But nothing is shown in console when I use this in my controller:

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

有什么想法？

推荐答案

像弗洛里安提及。您的异步调用是不是你出的code明显。

Like Florian mentioned. Your asynchronous call is not obvious in the code you've shown.

下面是你想要的要点是：

Here is the gist of what you want:

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

这篇关于角：重写功能，使用承诺的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！