Browse: Home » 【AngularJS】複数本の非同期通信が完了した後に処理を実行する方法。

【AngularJS】複数本の非同期通信が完了した後に処理を実行する方法。

$q.all()を用いる

AngularJSの$qはJavascriptのPromiseインターフェースを提供してくれるサービス。

$qのdefer()メソッドを実行すると、Deferredオブジェクトを生成する事ができる。

このDefferedオブジェクトと$qサービス用いることで複数ある非同期通信の完了を検知することが出来るようになる。

例

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// HogeリソースとFugaリソースが準備されているものとする。
var async_1 = function() {
    var d = $q.defer();
    HogeResource.query(function(data) {
        d.resolve(data);
    });
    return d.promise;
}
 
var async_2 = function() {
    var d = $q.defer();
    FugaResource.query(function(data) {
        d.resolve(data);
    });
    return d.promise;
}
 
$q.all([
    async_1(),
    async_2()
]).then(function(data) {
    var hogeData = data[0];
    var fugaData = data[1];
 
    // do something
});

各非同期通信処理関数は返り値としてPromiseオブジェクトを返却するように設計し、それを$q.all()メソッドでラップしてやればOK。

$qサービスはマジ便利過ぎて神がかってる。

$qに関する解説として下記ページも非常に参考になった。

http://dev.classmethod.jp/client-side/javascript/angularjs-q-promise/

2014/11/21 _onichannn , ,