在控制器中不回调的情况下解决服务中的承诺

Question

我想 ask/discuss 无论这是好的还是坏的做法 - 在控制器中进行服务调用的优点和缺点是什么？尽可能干净和简短。换句话说：不再有回调，而是利用 Angular 的 Angular 绑定原则。

看看我分叉的一个Plnkr： http://plnkr.co/edit/zNwy8tNKG6DxAzBAclKY

我想实现 Plnkr 第 42 行注释掉的内容 > $scope.data = DataService.getData(3);。

app.factory('DataService', function($q, $http) {
      var cache = {};
      var service= {
        data:{src:''},
        getData: function(id, callback) {
          var deffered = $q.defer();
          if (cache[id]) {
            service.data.src = 'cache';
            deffered.resolve(cache[id])
          } else {
            $http.get('data.json').then(function(res) {
              service.data.src = 'ajax';
              cache[id] = res.data;
              cache[id].dataSource = service.data.src;
              deffered.resolve(cache[id])
            })
          }
          return deffered.promise.then(callback);
        }
      }
      return service
    })
     app.controller('MainCtrl', function($scope, DataService) {

        DataService.getData(3, function(result) {
          $scope.data = result;
        });

     //$scope.data = DataService.getData(3);
});

Answer 1

关于服务请求数据和 returning 承诺，我的最佳实践是：

return 一个承诺（在数据服务中，return deferred.promise）
在控制器中，调用DataService.getData(3).then(, )

所以我不会将回调传递给使用承诺的服务函数。

比较难的问题是服务功能应该做什么，then(function(data) {...})应该做什么。以下是一些准则：

任何共享的（数据/重复功能），在服务中实施
任何与将数据/函数绑定到 UI 元素相关的东西，在控制器中实现
让您的控制器尽可能简单 - 它们应该 link 在 UI 元素和模型之间。
任何模型逻辑、处理、格式解析等 - 在服务中实现

我是看了评论才加的：

如果您需要进行一些处理（如检查缓存结果、解析结果等），那么在服务中执行此操作的合适位置。

所以我会修改你的代码如下：

var service= {
  data:{src:''},
  getData: function(id) {
    var deffered = $q.defer();
    if (cache[id]) {
      service.data.src = 'cache';
      deffered.resolve(cache[id]);
      return deferred;
    } else {
      return $http.get('data.json').then(function(res) {
        service.data.src = 'ajax';
        cache[id] = res.data;
        cache[id].dataSource = service.data.src;
        return cache[id]; // this will resolve to the next ".then(..)"
      });
    }
  }
}

Answer 2

AfaIk 这是不可能的 - 看这个 Thread

您可以 'automatically' 使用 angular-route 解决承诺。已解决的承诺将注入您的控制器。

Answer 3

你可以这样做plunker

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link href="style.css" rel="stylesheet" />
  <script data-semver="1.2.4" src="http://code.angularjs.org/1.2.4/angular.js" data-require="angular.js@1.2.x"></script>
  <script src="app.js"></script>
  <script>
    app.factory('DataService', function($q, $http) {
      var cache = {};
      var service= {
        data:{src:''},
        getData: function(id, callback) {
          var deffered = $q.defer();
          if (cache[id]) {
            service.data.src = 'cache';
            deffered.resolve(cache[id])
          } else {
            $http.get('data.json').then(function(res) {
              service.data.src = 'ajax';
              cache[id] = res.data;
              cache[id].dataSource = service.data.src;
              deffered.resolve(cache[id])
            })
          }
          return deffered.promise;
        }
      }
      return service
    })
     app.controller('MainCtrl', function($scope, DataService) {

         DataService.getData(3).then(function (data) {
          $scope.data = data;
        });
    });
  </script>
</head>

<body ng-controller="MainCtrl">

<div>Source: {{data.dataSource}}</div>
  <pre>{{data}}</pre>
</body>

</html>

在控制器中不回调的情况下解决服务中的承诺

Resolve promise in service without callback in controller

controller

callback

promise

angularjs

angular-promise