AngularJS控制器：如何在构造函数XHR完成前阻止页面标记就绪（适配PhantomJS快照）

嘿，这个问题我刚好有经验，咱们一步步来解决它！你的核心需求是让PhantomJS知道页面要等控制器里的XHR完成才真正就绪，同时确保Angular的路由流程等待这个请求完成再渲染页面对吧？下面是几个实用的方案：

这是Angular官方推荐的做法，resolve会在控制器实例化之前执行所有指定的异步操作，只有当所有promise都resolve之后，才会加载对应的路由和控制器。这样一来，不仅控制器拿到数据时已经是就绪状态，PhantomJS也能更清晰地判断页面何时准备好。

举个代码例子：

angular.module('myApp', ['ngRoute'])
  .config(function($routeProvider) {
    $routeProvider
      .when('/your-route', {
        templateUrl: 'your-template.html',
        controller: 'YourController',
        controllerAs: 'vm',
        resolve: {
          // 这里定义需要预加载的数据请求
          routeData: function($http) {
            // 返回的promise会被路由等待
            return $http.get('/api/your-data')
              .then(function(res) {
                return res.data;
              });
          }
        }
      });
  })
  .controller('YourController', function(routeData) {
    // 直接使用预加载好的数据，不用再在构造函数里发XHR
    this.data = routeData;
  });

这样路由切换时，会自动等待XHR完成才进入控制器，完美契合你的需求。

如果因为某些原因你必须在控制器构造函数里发起XHR，那我们可以给PhantomJS一个明确的“就绪信号”。具体做法是：

1. 跟踪所有$http请求的状态，当没有pending请求时标记页面就绪
2. 在PhantomJS脚本里等待这个标记

先写Angular的拦截器来跟踪请求：

angular.module('myApp')
  .factory('requestTracker', function($q) {
    let pendingRequests = 0;

    return {
      request: function(config) {
        pendingRequests++;
        return config || $q.when(config);
      },
      requestError: function(rejection) {
        pendingRequests--;
        return $q.reject(rejection);
      },
      response: function(response) {
        pendingRequests--;
        // 当所有请求都完成时，设置全局标记
        if (pendingRequests === 0) {
          window.pageIsReady = true;
        }
        return response || $q.when(response);
      },
      responseError: function(rejection) {
        pendingRequests--;
        if (pendingRequests === 0) {
          window.pageIsReady = true;
        }
        return $q.reject(rejection);
      }
    };
  })
  .config(function($httpProvider) {
    // 注册拦截器
    $httpProvider.interceptors.push('requestTracker');
  });

然后在你的PhantomJS脚本里，等待这个全局标记：

page.open('http://your-app-url', function(status) {
  if (status !== 'success') {
    console.log('页面加载失败');
    phantom.exit();
    return;
  }

  // 等待页面就绪标记
  page.waitFor(function() {
    return page.evaluate(function() {
      return window.pageIsReady === true;
    });
  }, function() {
    // 生成快照
    page.render('page-snapshot.png');
    phantom.exit();
  }, 10000); // 设置10秒超时，避免无限等待
});

如果你的XHR是单个特定请求，也可以不用全局拦截器，直接在控制器里把请求的promise关联到全局对象，比如：

angular.module('myApp')
  .controller('YourController', function($http) {
    const vm = this;
    // 发起请求并保存promise
    vm.dataRequest = $http.get('/api/your-data')
      .then(function(res) {
        vm.data = res.data;
        // 请求完成后标记
        window.pageIsReady = true;
      });
  });

这种方式更轻量，但只适用于单个请求的场景。

总的来说，方案1是最符合AngularJS最佳实践的，既能保证控制器数据就绪，又能让PhantomJS轻松判断页面状态，推荐优先使用！

内容的提问来源于stack exchange，提问作者Abdol Seed