- 追加された行はこの色です。
- 削除された行はこの色です。
#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;}