1. ホーム
  2. angularjs

[解決済み] angularjsで、$httpリクエストからレスポンスが来るまで待つにはどうしたらいいですか?

2023-02-19 06:36:51

質問

私は複数のページで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() の呼び出しがトリガーされます。そのため、コードの流れが少し複雑になるかもしれませんが、この方法の方がはるかに理にかなっています(結局、複雑さは一般的な非同期/並列プログラミングの共通の問題なのです!)。