[解決済み] angularjsで、$httpリクエストからレスポンスが来るまで待つにはどうしたらいいですか?
質問
私は複数のページでRESTfulサービスからのいくつかのデータを使用しています。 だから私はそれのためにアンギュラーファクトリーを使用しています。だから、私はサーバーから一度データを取得する必要があり、毎回私はその定義されたサービスからデータを取得しています。ちょうどグローバル変数のようなものです。以下はそのサンプルです。
var myApp = angular.module('myservices', []);
myApp.factory('myService', function($http) {
$http({method:"GET", url:"/my/url"}).success(function(result){
return result;
});
});
私のコントローラでは、このサービスを次のように使っています。
function myFunction($scope, myService) {
$scope.data = myService;
console.log("data.name"+$scope.data.name);
}
私の要件に従って、それは私のためにうまく機能しています。 しかし、ここでの問題は、私が私のウェブページで再読み込みしたときに、サービスが再び呼び出され、サーバーに要求されることです。その間に他の関数が実行され、それが"定義されたサービスに依存している場合、それは"何か"が未定義であるなどのエラーを与えていることです。そこで、サービスがロードされるまでスクリプトで待ちたいのです。どうすればいいのでしょうか?angularjsでそれを行う方法はありますか?
どのように解決するのですか?
いつ完了するかわからない非同期処理には、プロミスを使うべきです。プロミスは、まだ完了していないが、将来的に期待されている操作を表します。 https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise )
実装例としては、以下のような感じです。
myApp.factory('myService', function($http) {
var getData = function() {
// Angular $http() and then() both return promises themselves
return $http({method:"GET", url:"/my/url"}).then(function(result){
// What we return here is the data that will be accessible
// to us after the promise resolves
return result.data;
});
};
return { getData: getData };
});
function myFunction($scope, myService) {
var myDataPromise = myService.getData();
myDataPromise.then(function(result) {
// this is only run after getData() resolves
$scope.data = result;
console.log("data.name"+$scope.data.name);
});
}
編集:Sujoysのコメントについて .then()関数の実行が終了するまでmyFuction()の呼び出しが返らないようにするには、どうしたらよいでしょうか。
function myFunction($scope, myService) {
var myDataPromise = myService.getData();
myDataPromise.then(function(result) {
$scope.data = result;
console.log("data.name"+$scope.data.name);
});
console.log("This will get printed before data.name inside then. And I don't want that.");
}
さて、getData()の呼び出しが完了するのに10秒かかったとしましょう。その間に関数が何も返さなかった場合、事実上通常の同期コードとなり、完了するまでブラウザーをハングアップさせることになります。
しかし、プロミスが即座に返されるので、ブラウザはその間に他のコードを自由に続行できます。いったんプロミスが解決または失敗すると、then() の呼び出しがトリガーされます。そのため、コードの流れが少し複雑になるかもしれませんが、この方法の方がはるかに理にかなっています(結局、複雑さは一般的な非同期/並列プログラミングの共通の問題なのです!)。
関連
-
[解決済み] angularJSのSTATEを理解する
-
[解決済み] シンプルなangularjsの日付入力
-
[解決済み] 'ApplicationSignInManager' が見つからない(ASP.NET MVC)
-
角型グローバル確認ボックス
-
[解決済み] Angularjsを使用してローカルストレージにデータを保存するにはどうすればよいですか?
-
[解決済み] AngularJSを使用して、ブラウザのコンソールで$scope変数にアクセスするにはどうすればよいですか?
-
[解決済み] AngularJSのng-repeatでキーと値を反復処理する方法は?
-
[解決済み] AngularJSのng-optionsでvalueプロパティを設定するには?
-
[解決済み] ng-repeat :単一フィールドによるフィルタリング
-
[解決済み] AngularJSのサービスをコンソールからテストするにはどうしたらいいですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】npm UNMET PEER DEPENDENCYの警告を修正するにはどうすればいいですか?
-
[解決済み] `ui-router` $stateParams vs. $state.params
-
[解決済み] 方法 $state.go()
-
[解決済み] Angular JS $locationChangeStart 次の url ルートオブジェクトを取得する
-
[解決済み] data-ng-file-selectが動作しないのはなぜですか?
-
[解決済み] AngularJSでkeypressイベントを使用するには?
-
[解決済み] どのようにangularJSでrouteProviderとlocationProviderを設定するのですか?
-
[解決済み] AngularJS: ngRouteが動作しない。
-
[解決済み] Angular.js: $evalの仕組みとバニラevalとの違いは何ですか?
-
[解決済み] AngularJSでコントローラを2回実行する場合の対処法