Top / AngularJS / TIPS集 / 非同期処理のいろいろ

Angularでプログラム書いていて、サーバからの結果を画面表示するためにコールバックでゴニョゴニョしたり、時間がかかったらタイムアウトしたり、一度だけ取っときゃいいデータはサービスでストアしといたり、一度に複数データを取って全部戻ってきたら処理をしたかったり、そういう非同期関連の処理を調べてて、いろいろメモっとかなきゃとおもいwikiっとく事にしました。。

ってもまだ書き途中ですけど。。

.controller('Menu7Ctrl', function (sampleRestService1, sharedService1, $scope) {
    var p4 = sampleRestService1.getWeather();
    console.log(p4);
    p4.then(function (data) {
            $scope.result1 = sampleRestService1.sharedService1.cacheData1;
            $scope.result2 = sampleRestService1.sharedService1.cacheData2;
            console.log(data);
        }, function (data) {
            console.log('失敗！');
            console.log(data);
        }
    );
})

Controllerで非同期通信したい場合は、promiseを返却するサービスを作成して、結果をコールバックでセットするのが一般的*1。thenに渡すメソッドは、成功した場合と失敗した場合それぞれの処理ですね。。

このサービス(sampleRestService1) は、サーバにRESTでアクセスしてなんか値を返すとかそんなモノをイメージしてください。

.factory('sharedService1', function () {

    var data1;
    var data2;

    // Public API here
    return {
        get cacheData1() {
            return this.data1;
        },
        set cacheData1(val) {
            this.data1 = val;
        },
        get cacheData2() {
            return this.data2;
        },
        set cacheData2(val) {
            this.data2 = val;
        }
    };
})
.factory('sampleRestService1', function ($resource, sharedService1, $q) {
        // Resourceの戻り値。
        return {
            get sharedService1() {
                return sharedService1;
            },
            getWeather: function () {
                var d = $q.defer();
                var r1 = $resource('/api/weather1.json');
                var r2 = $resource('/api/weather2.json',
                    {},
                    {'get': {method: 'GET', timeout: 3500}}
                    // 3.5sでタイムアウトとした
                );

                $q.all([r1.get().$promise, r2.get().$promise]).then(
                    function (result) {
                        console.log(result[0]);
                        console.log(result[1]);
                        sharedService1.cacheData1 = result[0];
                        sharedService1.cacheData2 = result[1];
                        d.resolve(sharedService1);
                        console.log("ホンモノデータを使う。そのあとキャッシュを生成");
                    },
                    function (result) {
                        console.log("$q.allの一つが失敗した");
                        d.reject(result);// $q.all()の失敗を検知してメインのdeferも失敗とする
                    }
                );
                return d.promise;
            }
        }
    }
)

サービスはこんな感じにしてみました。ふたつのRESTを処理して、返ってきたデータを別のサービス(sharedService1)に格納してます。

ふたつの結果が返ってきてから sharedService1にセットするために 各$resourceのpromiseを使ってしまった(?)ので、

var d = $q.defer();
//長い処理。おわったら、、
d.resolve();
return d.promise;

って、新たなpromiseをつくって返してます。。

この記事は

選択肢 投票
おもしろかった 0  
そうでもない 0  

Top / AngularJS / TIPS集 / 非同期処理のいろいろ

現在のアクセス:3382

*1 $resourceのgetとかをControllerから呼べば？については後述。
トップ   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS