Question

我想在角度控制器中调用setup方法，该控制器获取需要继续的所有相关组件。我敢肯定我应该使用promises，但我对正确使用有点困惑。考虑一下：

我有一个ShellController需要获取当前登录的用户，然后在屏幕上显示他们的名字，然后获取一些客户详细信息并在屏幕上显示。如果此序列在任何时候失败，那么我需要一个地方才能失败。这是我到目前为止所做的事情（不是工作）。

var app = angular.module('app', [])

app.controller('ShellController', function($q, ShellService) {
  var shell = this;
  shell.busy = true;
  shell.error = false;

  activate();

  function activate() {

    var init = $q.when()
      .then(ShellService.getUser())
      .then(setupUser(result)) //result is empty
      .then(ShellService.getCustomer())
      .then(setupCustomer(result)) // result is empty
      .catch(function(error) { // common catch for any errors with the above
        shell.error = true;
        shell.errorMessage = error;
      })
      .finally(function() {
        shell.busy = false;
      });
  }

  function setupUser(user) {
    shell.username = user;
  }

  function setupCustomer(customer) {
    shell.customer = customer;
  }
});

app.service('ShellService', function($q, $timeout) {

  return {
    getUser: function() {
      var deferred = $q.defer();

      $timeout(function() {
        deferred.resolve('User McUserface');
      }, 2000);

      return deferred.promise;
    },
    getCustomer: function() {
      var deferred = $q.defer();

      $timeout(function() {
        deferred.resolve('Mary Smith');
      }, 2000);

      return deferred.promise;
    }
  }

});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="app">
  <div ng-controller="ShellController as shell">
    <div class="alert alert-danger" ng-show="shell.error">
      An error occurred! {{ shell.errorMessage }}
    </div>
    <div class="alert alert-info" ng-show="shell.busy">
      Fetching details...
    </div>
    <div>Username: {{ shell.username }}</div>
    <div>Customer: {{ shell.customer }}</div>
  </div>
</body>

我应该在这做什么？

Answer 1

您的代码几乎不需要更改。 .then()收到回调参考，而不是另一个承诺。所以这里

.then(ShellService.getUser())

您将承诺作为参数传递。您应该传递一个回调，它返回一个解析值或一个promise 作为参数以允许链接

此外，初始$q.when不是必需的，因为您的第一个函数已经返回了一个promise。你应该这样做：

ShellService.getUser()
      .then(setupUser(result)) //result is empty
      .then(ShellService.getCustomer)
      .then(setupCustomer)
      .catch(function(error) { // common catch for any errors with the above
        shell.error = true;
        shell.errorMessage = error;
      })
      .finally(function() {
        shell.busy = false;
      });

如何用$ q顺序调用promises

1 个答案: