AngularJS/TIPS集/非同期処理のいろいろ
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
単語検索
|
最終更新
|
ヘルプ
|
ログイン
]
開始行:
#topicpath
----
#contents
Angularでプログラム書いていて、サーバからの結果を画面表示...
ってもまだ書き途中ですけど。。
.controller('Menu7Ctrl', function (sampleRestService1, $...
var p4 = sampleRestService1.getWeather();
console.log(p4);
p4.then(function (sharedService1) {
console.log(sharedService1);
$scope.result1 = sharedService1.get(0);
$scope.result2 = sharedService1.get(1);
}, function (data) {
console.log(data);
console.log('失敗!');
}
);
})
Controllerで非同期通信したい場合は、promiseを返却するサー...
このサービス(sampleRestService1) は、サーバにRESTでアクセ...
.factory('sampleRestService1', function ($resource, shar...
return {
getWeather: function () {
var d = $q.defer();
if (!(sharedService1.isEmpty(0) || share...
console.log("キャッシュデータを使う");
d.resolve(sharedService1);
} else {
var r1 = $resource('/api/weather1.js...
var r2 = $resource('/api/weather2.js...
{},
{'get': {method: 'GET', timeout:...
// 3.5sでタイムアウトとした
);
$q.all([r1.get().$promise, r2.get()....
function (result) {
console.log(result[0]);
console.log(result[1]);
sharedService1.add(result[0]);
sharedService1.add(result[1]);
d.resolve(sharedService1);
console.log("ホンモノデータ...
},
function (result) {
console.log("$q.allの一つが...
d.reject(result);// $q.all()...
}
);
}
return d.promise;
}
}
}
)
.factory('sharedService1', function () {
var _data = [];
// Public API here
return {
isEmpty: function (index) {
return _data[index] == null;
},
get: function (index) {
return _data[index];
},
add: function (val) {
_data.push(val);
}
};
})
サービスはこんな感じにしてみました。ふたつのRESTを処理し...
ふたつの結果が返ってきてから sharedService1にセットするた...
var d = $q.defer();
//長い処理。おわったら、、
d.resolve();
return d.promise;
って、新たなpromiseをつくって返してます。。
以下、いろいろなTIPSです
** 非同期処理を実行する、var d = $q.defer() / d.promise; ...
$resourceなどでも使用されている、promiseについてです。pro...
上の処理でうところの、
var promise = sampleRestService1.getWeather();
promise.then(function (sharedService1) {
console.log(sharedService1);
$scope.result1 = sharedService1.get(0);
$scope.result2 = sharedService1.get(1);
}, function (data) {
console.log(data);
console.log('失敗!');
}
);
ココですね。sampleRestService1.getWeather() はとりあえず ...
さて、ではsampleRestService1.getWeather()はどうやって非同...
var d = $q.defer();
いろいろ時間がかかる処理
// 完了できたらresolve
d.resolve(sharedService1);
// 処理が失敗してしまったら reject
d.reject(result);
return d.promise;
Angularが提供する$qサービスを用いて
var d = $q.defer();
という参照を取得し、処理が完了したら d.resolve、失敗して...
** 複数の非同期処理を実行する、$q.all [#g67e7230]
続いて複数の非同期処理を実行する場合です。サンプルではRES...
具体的には以下の箇所:
var r1 = $resource('/api/weather1.json');
var r2 = $resource('/api/weather2.json');
$q.all([r1.get().$promise, r2.get().$promise]).then(
function (result) {
console.log(result[0]);
console.log(result[1]);
sharedService1.add(result[0]);
sharedService1.add(result[1]);
d.resolve(sharedService1);
},
function (result) {
console.log("$q.allの一つが失敗した");
d.reject(result);// $q.all()の失敗を検知してメイ...
}
);
ココでは
r1.get().$promise
r2.get().$promise
などと $resourceがもっているpromiseオブジェクト(まさにさ...
promise便利ですね。。
**実行結果をキャッシュする。 [#we2f1d7c]
たとえばサーバから固定的なデータを一度だけ取得するなど、...
具体的にはこんな感じ。
sampleRestService1 は sharedService1 をInjectionしていま...
.factory('sharedService1', function () {
var _data = [];
return {
isEmpty: function (index) {
return _data[index] == null;
},
get: function (index) {
return _data[index];
},
add: function (val) {
_data.push(val);
}
};
})
とオブジェクトを追加できるようにしてあります。そして、sam...
getWeather: function () {
var d = $q.defer();
if (!(sharedService1.isEmpty(0) || sharedService1.is...
console.log("キャッシュデータを使う");
d.resolve(sharedService1);
} else {
var r1 = $resource('/api/weather1.json');
... 時間がかかる処理。一度だけやるようにしたい
d.resolve(sharedService1);
}
return d.promise;
}
というように、sharedService1 に値が入っていたらそれを返す...
sampleRestService1や sharedService1 などAngularのサービス...
var result0 = sampleRestService1.sharedService1.get(0);
などとアクセスしても、キャッシュがあればそれを返すように...
いろいろな画面で共通に利用される情報や、プルダウンのデー...
----
この記事は
#vote(おもしろかった[5],そうでもない[0])
- qqq -- [[qq]] &new{2020-06-05 (金) 16:03:53};
- qqq -- [[qq]] &new{2020-06-05 (金) 16:03:51};
- qqq -- [[qq]] &new{2020-06-05 (金) 16:03:50};
- qqq -- [[11]] &new{2020-06-05 (金) 16:04:00};
- qqq -- [[11]] &new{2020-06-05 (金) 16:04:00};
#comment
#topicpath
SIZE(10){現在のアクセス:&counter;}
終了行:
#topicpath
----
#contents
Angularでプログラム書いていて、サーバからの結果を画面表示...
ってもまだ書き途中ですけど。。
.controller('Menu7Ctrl', function (sampleRestService1, $...
var p4 = sampleRestService1.getWeather();
console.log(p4);
p4.then(function (sharedService1) {
console.log(sharedService1);
$scope.result1 = sharedService1.get(0);
$scope.result2 = sharedService1.get(1);
}, function (data) {
console.log(data);
console.log('失敗!');
}
);
})
Controllerで非同期通信したい場合は、promiseを返却するサー...
このサービス(sampleRestService1) は、サーバにRESTでアクセ...
.factory('sampleRestService1', function ($resource, shar...
return {
getWeather: function () {
var d = $q.defer();
if (!(sharedService1.isEmpty(0) || share...
console.log("キャッシュデータを使う");
d.resolve(sharedService1);
} else {
var r1 = $resource('/api/weather1.js...
var r2 = $resource('/api/weather2.js...
{},
{'get': {method: 'GET', timeout:...
// 3.5sでタイムアウトとした
);
$q.all([r1.get().$promise, r2.get()....
function (result) {
console.log(result[0]);
console.log(result[1]);
sharedService1.add(result[0]);
sharedService1.add(result[1]);
d.resolve(sharedService1);
console.log("ホンモノデータ...
},
function (result) {
console.log("$q.allの一つが...
d.reject(result);// $q.all()...
}
);
}
return d.promise;
}
}
}
)
.factory('sharedService1', function () {
var _data = [];
// Public API here
return {
isEmpty: function (index) {
return _data[index] == null;
},
get: function (index) {
return _data[index];
},
add: function (val) {
_data.push(val);
}
};
})
サービスはこんな感じにしてみました。ふたつのRESTを処理し...
ふたつの結果が返ってきてから sharedService1にセットするた...
var d = $q.defer();
//長い処理。おわったら、、
d.resolve();
return d.promise;
って、新たなpromiseをつくって返してます。。
以下、いろいろなTIPSです
** 非同期処理を実行する、var d = $q.defer() / d.promise; ...
$resourceなどでも使用されている、promiseについてです。pro...
上の処理でうところの、
var promise = sampleRestService1.getWeather();
promise.then(function (sharedService1) {
console.log(sharedService1);
$scope.result1 = sharedService1.get(0);
$scope.result2 = sharedService1.get(1);
}, function (data) {
console.log(data);
console.log('失敗!');
}
);
ココですね。sampleRestService1.getWeather() はとりあえず ...
さて、ではsampleRestService1.getWeather()はどうやって非同...
var d = $q.defer();
いろいろ時間がかかる処理
// 完了できたらresolve
d.resolve(sharedService1);
// 処理が失敗してしまったら reject
d.reject(result);
return d.promise;
Angularが提供する$qサービスを用いて
var d = $q.defer();
という参照を取得し、処理が完了したら d.resolve、失敗して...
** 複数の非同期処理を実行する、$q.all [#g67e7230]
続いて複数の非同期処理を実行する場合です。サンプルではRES...
具体的には以下の箇所:
var r1 = $resource('/api/weather1.json');
var r2 = $resource('/api/weather2.json');
$q.all([r1.get().$promise, r2.get().$promise]).then(
function (result) {
console.log(result[0]);
console.log(result[1]);
sharedService1.add(result[0]);
sharedService1.add(result[1]);
d.resolve(sharedService1);
},
function (result) {
console.log("$q.allの一つが失敗した");
d.reject(result);// $q.all()の失敗を検知してメイ...
}
);
ココでは
r1.get().$promise
r2.get().$promise
などと $resourceがもっているpromiseオブジェクト(まさにさ...
promise便利ですね。。
**実行結果をキャッシュする。 [#we2f1d7c]
たとえばサーバから固定的なデータを一度だけ取得するなど、...
具体的にはこんな感じ。
sampleRestService1 は sharedService1 をInjectionしていま...
.factory('sharedService1', function () {
var _data = [];
return {
isEmpty: function (index) {
return _data[index] == null;
},
get: function (index) {
return _data[index];
},
add: function (val) {
_data.push(val);
}
};
})
とオブジェクトを追加できるようにしてあります。そして、sam...
getWeather: function () {
var d = $q.defer();
if (!(sharedService1.isEmpty(0) || sharedService1.is...
console.log("キャッシュデータを使う");
d.resolve(sharedService1);
} else {
var r1 = $resource('/api/weather1.json');
... 時間がかかる処理。一度だけやるようにしたい
d.resolve(sharedService1);
}
return d.promise;
}
というように、sharedService1 に値が入っていたらそれを返す...
sampleRestService1や sharedService1 などAngularのサービス...
var result0 = sampleRestService1.sharedService1.get(0);
などとアクセスしても、キャッシュがあればそれを返すように...
いろいろな画面で共通に利用される情報や、プルダウンのデー...
----
この記事は
#vote(おもしろかった[5],そうでもない[0])
- qqq -- [[qq]] &new{2020-06-05 (金) 16:03:53};
- qqq -- [[qq]] &new{2020-06-05 (金) 16:03:51};
- qqq -- [[qq]] &new{2020-06-05 (金) 16:03:50};
- qqq -- [[11]] &new{2020-06-05 (金) 16:04:00};
- qqq -- [[11]] &new{2020-06-05 (金) 16:04:00};
#comment
#topicpath
SIZE(10){現在のアクセス:&counter;}
ページ名: