javascript - Controller 进行多个同步嵌套服务调用

Question

在下面的简单示例中，我有一个方法调用 (getMoreProducts) 需要在第一个方法调用 (getProducts) 完成后调用。

由于我是 angularjs 的新手(并且是 JS 的新手)，我想确认是否有另一种方法可以实现这一点。我担心的是，如果在 getMoreProducts 之后需要调用另一个方法，那么代码将深入三层，依此类推。

.controller('ProductController',function(ProductService, $scope){
  $scope.products = [];
  $scope.moreProducts  = [];

  ProductService.getProducts().then(function(res){
     $scope.products = res.data;

     ProductService.getMoreProducts().then(function(res){
        $scope.moreProducts = res.data;
     });
  });

对于此示例，假设 ProductService 方法只是调用 HTTP GET 调用。

Answer 1

OP 中嵌套 promise 中使用的反模式是一种“回调 hell ”形式，这正是 promise 应该帮助解决的问题。

当下一个调用依赖于上一个调用时，promises 应该串联起来，这样它们的深度不超过 1 级:

  ProductService.getProducts().then(function (productsRes) {
     $scope.products = productsRes.data;
     return ProductService.getMoreProducts();
  })
  .then(function (moreProductsRes) {
      $scope.moreProducts = moreProductsRes.data;
     return ProductService.getEvenMoreProducts();
  })
  .then(function (evenMoreProductsRes) { ... });

当 promises 不依赖于彼此的结果时(如本例)，它们可以并行执行，这就是 $q.all 的用途:

$q.all([ProductService.getProducts(), ProductService.getMoreProducts()])
.then(function (responses) {
   var productsRes = responses[0];
   var moreProductsRes = responses[1];
   $scope.products = productsRes.data;
   $scope.moreProducts = moreProductsRes.data;
});