如何确保AngularJS中先获取a.json再获取b.json最后执行init函数？

嘿，我来帮你搞定这个异步请求顺序的问题！你现在的代码里，两个$http.get是几乎同时触发的，并没有等待第一个请求完成再发起第二个，所以没法保证a.json加载完成后才去加载b.json。

要实现先获取a.json → 再获取b.json → 最后执行init函数的顺序，我们可以利用AngularJS中$http返回的Promise对象，通过链式调用的方式来严格控制异步流程：

修改后的代码示例 #

var app = angular.module('calendarApp', []);
app.controller('ctrl', function($scope, $http) {
    // 先发起a.json的请求
    $http.get(aUrl)
        .then(function(aResponse) {
            // a.json请求成功后，再发起b.json的请求
            return $http.get(bUrl);
        })
        .then(function(bResponse) {
            // b.json请求成功后，执行初始化函数
            init();
        })
        .catch(function(error) {
            // 捕获任何一个请求失败的情况，避免错误被忽略
            console.error('请求过程出错了:', error);
        });

    var init = function() {
        // 这里写你的初始化业务逻辑
        console.log('init函数已执行！');
    };
});

关键逻辑说明 #

• $http.get()返回的是Promise对象，调用.then()方法可以指定当前请求成功后要执行的回调。
• 在第一个.then()里返回第二个$http.get(bUrl)的Promise，这样后续的.then()会自动等待第二个请求完成后再触发。
• 最后一个.then()里调用init()，就能确保它是在两个请求都成功完成后才执行的。
• 加上.catch()可以统一处理请求失败的场景，让代码更健壮。

扩展：如果需要在init中使用请求数据 #

如果你想在初始化时用到a或b请求回来的数据，可以把数据暂存到$scope或变量中，再传递给init：

$http.get(aUrl)
    .then(function(aResponse) {
        $scope.aData = aResponse.data;
        return $http.get(bUrl);
    })
    .then(function(bResponse) {
        $scope.bData = bResponse.data;
        init($scope.aData, $scope.bData);
    });

var init = function(aData, bData) {
    // 这里可以直接使用a和b的数据做初始化操作
    console.log('初始化使用的a数据:', aData);
    console.log('初始化使用的b数据:', bData);
};

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