AngularJS 1中同步Promise链式调用是否有更优实现方式？

我来给你演示一个需要按特定顺序同步解析Promise（p1、p2、p3）的链式调用场景，基于AngularJS 1实现，执行顺序是先解析P3，再解析P2，最后解析P1。

咱们先看完整的实现代码：

angular.module("myApp", []);
angular.module("myApp").controller("myCtrl", myCtrl);
angular.module("myApp").factory("demoService", demoService);

// 依赖注入配置
demoService.$inject = ["$q", "$timeout"];
myCtrl.$inject = ["$scope", "demoService"];

// 服务实现：返回不同延迟的Promise
function demoService($q, $timeout) {
  return {
    get1000: function() {
      return $timeout(() => ({ name: "Promise 1 (1000ms)" }), 1000);
    },
    get2000: function() {
      return $timeout(() => ({ name: "Promise 2 (2000ms)" }), 2000);
    },
    get3000: function() {
      return $timeout(() => ({ name: "Promise 3 (3000ms)" }), 3000);
    }
  };
}

// 控制器逻辑：链式调用控制Promise执行顺序
function myCtrl($scope, demoService) {
  var vm = this;
  vm.init = init;
  vm.myList = [];

  function init() {
    var p1 = demoService.get1000();
    var p3 = demoService.get3000();
    var p2 = demoService.get2000();

    // 链式调用：P3 → P2 → P1
    p3.then(function(obj) {
      console.log(obj.name);
      vm.myList.push(obj.name);
      return p2; // 返回p2，让下一个then等待p2完成
    }).then(function(obj) {
      console.log(obj.name);
      vm.myList.push(obj.name);
      return p1; // 返回p1，让下一个then等待p1完成
    }).then(function(obj) {
      console.log(obj.name);
      vm.myList.push(obj.name);
      console.log("所有Promise执行完成");
    }).catch(function(err) {
      console.error("Promise执行出错：", err);
    });
  }

  // 页面加载时初始化执行
  vm.init();
}

关键逻辑说明 #

• 虽然我们提前创建了p1、p2、p3三个Promise对象，但它们的实际resolve顺序是通过then链式调用来严格控制的，不会因为p1延迟更短就先执行
• 在第一个then（对应p3的resolve）中返回p2，AngularJS的$q会自动等待p2完成后，再执行下一个then回调
• 同理，在p2的then回调中返回p1，确保最后执行p1的resolve逻辑
• 这样就完美实现了P3 → P2 → P1的指定执行顺序，同时可以在每个步骤中处理对应Promise的返回结果

内容的提问来源于stack exchange，提问作者Rahul Shivsharan