从 foreach 循环链接承诺

Question

如何在 AngularJS 中使 foreach 循环同步

var articles = arg;

articles.forEach(function(data){
      var promises = [fetchImg(data), fetchUser(data)];

      $q.all(promises).then(function (res) {
           finalData.push(res[1]);
      });
});

return finalData;

我希望仅在 forEach 循环结束后返回 finalData 数组。有没有办法用承诺链接它？会先执行foreach循环，然后在循环结束后返回数组的东西？

Answer 1

从 foreach 循环链接承诺

Promises 通过返回 值（或 Promise）链接 到 .then 方法中的处理函数。使用$q.all 合并多个承诺，$q.all 本身返回一个 chainable 承诺。

function fetchUsers(arg) {
    var articles = arg;

    var promises = articles.map(function(a){
        var subPromises = [fetchImg(a), fetchUser(a)];        
        return $q.all(subPromises).then(function (res) {
             //return for chaining
             return {img: res[0], user: res[1]};
        });
    });

    //consolidate promises    
    var finalPromise = $q.all(promises); 
    return finalPromise;
};

因为调用 Promise 的 .then 方法会返回一个新的派生 Promise，所以很容易创建一个 Promise 链。可以创建任意长度的链，并且由于可以使用另一个 Promise 来解决一个 Promise（这将进一步推迟其解决方案），因此可以在链中的任何点暂停/推迟对 Promise 的解决。^{@ 987654321@}

返回的 Promise 将通过一组用户解决或将通过第一个错误解决拒绝。使用 promise 的 .then 和 .catch 方法检索最终解决方案。

 fetchUsers(args)
     .then ( function onFulfilled(objArray) {
          $scope.users = objArray.map(x => x.user);
          return objArray;
     }).catch ( function onRejected(response) {
          console.log("ERROR: ", response);
          throw response
     })
 ;

---

$q.defer 反模式

使用$q.defer() 的问题在于它破坏了promise 链，丢失了错误信息，并且在错误处理不当时会造成内存泄漏。有关这方面的更多信息，请参阅AngularJS Is this a “Deferred Antipattern”?。

Answer 2

你可以像这样修改你的代码：

function fetArticles(arg) {
    var articles = arg;
    var promises = [], finalData = [];
    var deferred = $q.defer();

    articles.forEach(function(data) {
          var userPromise = fetchUser(data);
          userPromise.then(function (res) {
               finalData.push(res[1]);
          });

          promises.push(fetchImg(data));
          promises.push(userPrommise);
    });

    $q.all(promises).then(function() {
         deferred.resolve({finalData: finalData, foo: "bar"});
    });

    return deferred.promise;
}

现在，调用这个方法并注册一个最终回调：

fetArticles(arg).then(function(data) {
     console.log("finalData: ", data.finalData, data.foo === "bar");
});