#topicpath ---- #contents 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を返却するサービスを作成して、結果をコールバックでセットするのが一般的(($resourceのgetとかをControllerから呼べば?については後述。))。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をつくって返してます。。 ---- この記事は #vote(おもしろかった,そうでもない) #comment #topicpath SIZE(10){現在のアクセス:&counter;}