AngularJS异步调用问题：子控制器无法获取服务异步返回数据

这个场景太常见了——异步请求还在pending状态，路由已经跳转到子页面，导致子控制器拿不到需要的数据。我给你分享几个在AngularJS项目里常用的解决思路：

方案一：利用路由resolve属性（最推荐） #

AngularJS的路由原生支持resolve配置，它能确保在路由跳转完成、控制器实例化之前，完成所有指定的异步操作。这是最贴合AngularJS设计理念的解决方案。

步骤： #

1. 修改你的路由配置，给/subpage路由添加resolve项，在这里完成salesOrder的获取与存储：

angular.module('yourApp').config(function($routeProvider) {
  $routeProvider
    .when('/subpage', {
      templateUrl: 'subpage.html',
      controller: 'subCtrl',
      resolve: {
        // 这里的函数会在路由跳转前执行，返回的Promise完成后才会加载控制器
        salesOrder: function(salesService) {
          return salesService.getSalesOrder()
            .then(function(response) {
              salesService.setSalesOrder(response);
              return response; // 可以把数据直接注入到subCtrl中
            });
        }
      }
    });
});

2. 在subCtrl中直接注入resolve里的salesOrder（或者依旧通过salesService.getSalesOrder()获取，此时数据已经存在）：

angular.module('yourApp').controller('subCtrl', function($scope, salesService, salesOrder) {
  function init() {
    // 两种方式都可以拿到数据
    const order = salesOrder; 
    // 或者 const order = salesService.getSalesOrder();
    // 后续逻辑...
  }
  init();
});

这样就能保证进入subpage时，数据一定是就绪的，完全避免了异步竞争问题。

方案二：让Service返回Promise，子控制器等待数据就绪 #

修改flowService的configureSteps方法，让它返回Promise，这样无论是mainCtrl还是subCtrl都可以监听这个Promise的状态。

步骤： #

1. 更新flowService.js：

function configureSteps() {
  // 返回getSalesOrder的Promise链
  return salesService.getSalesOrder().then(function(response) {
    salesService.setSalesOrder(response);
    return response;
  });
}

2. 在subCtrl.js中，等待Promise完成后再执行逻辑：

angular.module('yourApp').controller('subCtrl', function($scope, flowService, salesService) {
  function init() {
    // 如果mainCtrl已经调用过configureSteps，这里会直接拿到已完成的Promise
    flowService.configureSteps().then(function() {
      const order = salesService.getSalesOrder();
      // 执行需要数据的逻辑
    });
  }
  init();
});

这种方式的好处是不需要修改路由配置，适合一些路由结构复杂或者无法修改路由的场景。

方案三：使用事件广播通知数据就绪 #

当salesOrder数据成功保存后，通过AngularJS的事件系统广播一个通知，subCtrl监听这个事件，收到通知后再执行数据相关逻辑。

步骤： #

1. 在flowService.js中广播事件（需要注入$rootScope）：

function configureSteps($rootScope) {
  salesService.getSalesOrder().then(function(response) {
    salesService.setSalesOrder(response);
    // 广播数据就绪事件
    $rootScope.$broadcast('salesOrder:ready', response);
  });
}

2. 在subCtrl.js中监听事件：

angular.module('yourApp').controller('subCtrl', function($scope, salesService) {
  function init() {
    // 先检查数据是否已经存在（避免重复监听）
    const order = salesService.getSalesOrder();
    if (order) {
      handleOrderData(order);
      return;
    }

    // 监听数据就绪事件
    const unbind = $scope.$on('salesOrder:ready', function(event, order) {
      handleOrderData(order);
      // 执行完后解绑监听，避免内存泄漏
      unbind();
    });
  }

  function handleOrderData(order) {
    // 这里处理需要salesOrder的逻辑
  }

  init();
});

这个方案比较灵活，适合跨控制器、跨组件的状态通知，但要注意及时解绑事件监听，防止内存泄漏。

内容的提问来源于stack exchange，提问作者I'm nidhin