Angularjs：如何使服务代码“看起来同步”？

Question

如何使 Angular 服务代码“看起来同步”？

当我清理控制器并将业务逻辑代码放入服务时，我的问题出现了。到目前为止，一切都很好。现在我想在服务函数中“等待”，直到所有异步调用都返回并且 then 返回。我该怎么做？

为了说明我的问题，假设您有一个控制器代码：

1. 从后端请求一些数据
2. 对数据进行一些处理并
3. 将数据交给示波器

这样：

重构前的DataController：

$scope.submitForm = function() {

    RestBackend.query('something').then(function(data) {

        // do some additional things ...
        ...

        $scope.data = data;
    });
};

非常简单。获取数据并填充范围。

重构为控制器+服务后，我最终得到：

DataController 重构：

$scope.submitForm = function() {

    DataService.getData().then(function(data) {
        $scope.data = data;
    });
};

数据服务重构：

this.query = function() {
    var dataDefer = $q.defer();

    RestBackend.query('something').then(function(data) {

        // do some additional things ...
        ...

        dataDefer.resolve(data);
    });
    return dataDefer.promise;
};

我不喜欢在控制器中也必须使用 Promise 的事实。我喜欢承诺，但我想让控制器不知道服务的这个“实施细节”。这就是我希望控制器代码的样子：

DataController（应该如此）：

$scope.submitForm = function() {

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

你明白了吗？在控制器中，我不想关心承诺与否。只需等待获取数据然后使用它。因此，我正在寻找一种可能性来实现这样的服务：

1. 查询数据（异步）
2. 在获取数据之前不要返回
3. 返回获取的数据

现在我不清楚第 2 项：我怎样才能“等到数据被提取”然后才继续？目标是服务功能看起来是同步的。

Answer 1

我也认为您的解决方案很好。
返回承诺不是服务的实现细节。它是服务 API 的一部分（服务和服务消费者之间的“合同”）。

控制器需要一个承诺，该承诺会使用数据进行解析并按照它认为合适的方式进行处理。
如何构建承诺，如何获取数据等，这些是实现细节。
您可以随时将服务与执行完全不同的服务的服务交换，只要它履行合同（即返回一个在数据准备就绪的情况下解决的承诺）。

---

也就是说，如果您只使用视图中的数据（即在获取数据后不直接在控制器中对其进行操作），似乎是这种情况，您可以使用ngResources 方法：

返回一个空数组并在获取数据后用数据填充它：

$scope.data = DataService.getData();

// DataService refactored:
this.getData = function () {
    var data = [];

    RestBackend.query('something').then(function(responseData) {
        // do some additional things ...
        ...
        angular.forEach(responseData, function (item) {
            data.push(item);
        });
    });

    return data;
};

---

顺便说一句，在您当前的（良好）设置中，您需要$q.defer()。您可以只使用承诺链：

this.query = function() {
    return RestBackend.query('something').then(function(data) {
        // do some additional things ...
        ...
        return data;
    });
};

Answer 2

我认为你所拥有的是一个非常好的解决方案。您不必等待 promise 被解决，它违背了异步 javascript 的目的。问问自己为什么需要让它运行同步？

如果你依赖 html 来解决你可以做这样的事情

<div class="alert alert-warning text-center" data-ng-hide="!data.$resolved">
   Got data from service.
</div>

Answer 3

当您使用ngRoute 时，我建议您在路由配置中解析数据，然后视图将被加载一次您的所有数据都将被解析.

$routeProvider
  .when('/your-url', {
    templateUrl: 'path/to/your/template.html',
    controller: 'YourCtrl',

    // that's the point !
    resolve: {
      superAwesomeData: function (DataService) {
        return DataService.getData();
      }
    }
  });

现在，superAwesomeData 可以注入到您的控制器中，它将包含已解析的数据。

angular.module('youModule')
  .controller('YourCtrl', function (superAwesomeData) {

    // superAwesomeData === [...];

  });