ページの読み込み時にデータを読み込んでから、タスクを実行する必要があります。必要なデータを取得するために、複数の異なる 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()
);