在 Javascript 和 Angular 中链接 Promise答案

【问题标题】：Chaining promises in Javascript and Angular在 Javascript 和 Angular 中链接 Promise
【发布时间】：2016-08-12 15:37:13
【问题描述】：

我正在使用 Angular 资源从 API 中获取我的数据，方式如下：

var getAccountListPerUser = function () {

  return $resource(uri, {}, {
    get: {
      headers: service.getDefaultHeaderRequest(),
      method: 'GET',
      transformResponse: function (data) {
        var accountList = [];
        try {
          accountList = JSON.parse(data);
        } catch (e) {
          accountList = [];
        }
        return accountList;
      },
      isArray: true,
      cache: true
    }
  }).get().$promise;
};

在我的控制器中，我必须使用它和另外两个以相同方式定义的服务功能。

var promiseResourcesAccountList = usrWebUserService.getAccountListPerUser();

promiseResourcesAccountList.then(function(result){
  $scope.usersWithAccountsAndProfiles = result;
  var filteredProfiles = [];
  for (var account in result) {
    ...
  }
  $scope.filteredProfiles = filteredProfiles;
});

还有：

var promiseResourcesEditUser = usrWebUserService.getResourcesUser(currentUser);

promiseResourcesEditUser.then(function (result) {
  usrWebUserFactory.mapBasicPreferences($scope, result);
});

然后另一个非常相似，此信息在三个 div 中加载数据，但我只想在所有三个功能都正确完成时才显示它们。我想我必须链接承诺的结果。我该怎么做？

【问题讨论】：

使用Promise.all([array of your promises])。 Here 文档。

标签： javascript angularjs chaining

【解决方案1】：

你可以像这样链接它们：

promiseResourcesAccountList.then(function(result){
  ///whatever processing
  //return a promise
  return promiseResourcesEditUser()
}).then(function(){
  return anotherPromise();
}).then(function(){
   //update scope here
});

或者，您也可以使用 $q.all([promise1, promise2, promise3]).then(...);

【讨论】：

【解决方案2】：

@terpinmd 是正确的。链式 Promise 非常简单。假设您有一个带有“getWidgets”的服务，它返回一个承诺，并且您想使用该服务的响应来调用另一个服务，“getWidgetOwners”将返回另一个承诺：

假设

getWidgets 返回一个小部件对象数组。
getWidgetOwners 接受一组 ownerIds

如何：

服务.getWidgets() .then（函数（小部件）{ return widgets.map(function(widget) { // 提取 ownerIds 返回小部件.ownerId; }); }) .then(service.getWidgetOwners) // 将 ownerId 的数组传递给 .then(function(owners) { // 下一个服务控制台日志（所有者）； });

【讨论】：