8

サーバーからデータを取得するサービスがあります。ボタンをクリックしてこのサービスを介してサーバーにリクエストを送信すると、サーバーからの応答を受信するまでウィンドウがフリーズします。このリクエストを非同期にするためにできることはありますか?

これが私のサービスです。

app.factory('service', function($http) {
  return {
    getLogData : function(startTime,endTime){
      return $http({
        url:     baseURL + 'getLogData',
        method:  'GET',
        async:   true,
        cache:   false,
        headers: {'Accept': 'application/json', 'Pragma': 'no-cache'},
        params:  {'startTime': startTime , 'endTime': endTime}
      });
    }
  };
)};

HTML。

<button ng-click="getData()">Refresh</button>
<img src="pending.gif" ng-show="dataPending" />

コード

$scope.getData = function(){
  service.getLogData().success(function(data){
    //process data
  }).error(function(e){
    //show error message
  });
}
4

4 に答える 4

13

あなたのアプローチの長所と短所についていくつかの議論がありますが、問題はここで答えられていると思います.AJAX呼び出しは、応答を取得して成功を実行する間、ブラウザを少しフリーズします.

これが実際に問題の一部であるかどうかをテストするには、応答をダミーで作成し、静的に提供します。Fiddler または WireShark を使用して応答を取得し、testService.json などのファイルに保存します。XHR と $HTTP $.ajax などのさまざまな派生物はすべて、ヘッダーがわずかに異なる場合がありますが、それをサービスと見なします。

于 2013-09-27T17:21:16.500 に答える
3

成功の約束を使用して、$scope にアタッチできる一連のオブジェクトにログ データをラップします。

したがって、サービスにブロッキング メソッドを持たせる代わりに、"LogEntries" のリストを維持します。

   // constructor function
   var LogEntry = function() {
      /*...*/
   }

   var logEntries = [];

   // Non-blocking fetch log data
   var getLogData = function() {
        return $http({
            url : baseURL + 'getLogData',
            method : 'GET',
            async : true,
            cache : false,
            headers : { 'Accept' : 'application/json' , 'Pragma':'no-cache'},
            params : {'startTime' : startTime , 'endTime' : endTime}
        }).success(function(data) {;
           // for each log entry in data, populate logEntries
           // push(new LogEntry( stuff from data ))...
        };
   }

次に、コントローラーでサービスを挿入し、このサービスのログ データ配列を参照して、Angular がそれを監視し、ビューを正しく変更するようにします。

   $scope.logEntries = mySvc.logEntries;

次に、HTML で logEntries に対して何かを実行します。

  <p ng-repeat="logEntry in logEntries">
    {{logEntry}}
  </p>
于 2013-09-27T16:39:06.140 に答える
2

このコードを使用して構成します

$httpProvider.useApplyAsync(true);
于 2016-08-03T12:43:04.490 に答える
0 
var url = //Your URL;

  var config = {
    async:true
  };

  var promise= $http.get(url, config);
     promise.then(
     function (result) 
     {
       return result.data;
     },
     function (error) 
     {
       return error;
     }
    );
于 2016-07-25T06:01:22.387 に答える