7

ページの読み込み時にデータを読み込んでから、タスクを実行する必要があります。必要なデータを取得するために、複数の異なる ajax 呼び出しを実行します。しかし、タスクを実行するには、すべての ajax 呼び出しが完了していることを確認する必要があります。これが私がこれまでに行ったことです:

$q.when(
        $http.get('url1').success(function (data) {
            $scope.data1 = data;
            console.log("ajax1 finished");
        }),
        $http.get('url2').success(function (data) {
            $scope.data2 = data;
            console.log("ajax2 finished");
        }),
        $http.get('url3').success(function (data) {
            $scope.data3 = data;
            console.log("ajax3 finished");
        }),
        $http.get('url4').success(function (data) {
            $scope.data4 = data;
            console.log("ajax4 finished");
        })
    ).then(
        console.log("All ajax calls have finished!"),
        executeTask()
    );

私の問題は、すべての ajax 呼び出しが終了した後、ブロック内のコードがthen(...);実行されないことです。コンソールに次のようなものが表示されます。

ajax2 finished
ajax1 finished
All ajax calls have finished!
ajax3 finished
ajax4 finished

私は何か間違ったことをしているに違いない。どうすれば思い通りに動作させることができますか?


編集:回答に記載されているように次のことを試しましたが、それでも同じ問題に直面しています。

$q.all([
    $http.get('url1').then(function (data) {
        $scope.data1 = data;
        console.log("");
    }),
    $http.get('url2').success(function (data) {
        $scope.data2 = then;
        console.log("ajax2 finished");
    }),
    $http.get('url3').then(function (data) {
        $scope.data3 = data;
        console.log("ajax3 finished");
    }),
    $http.get('url4').then(function (data) {
        $scope.data4 = data;
        console.log("ajax4 finished");
    })
]).then(
    console.log(""),
    executeTask()
);
4

2 に答える 2