Question

我正在尝试根据服务器响应每秒更新一次视图。我正在使用实时数据显示应用程序。我需要每秒向服务器发送请求并获得响应并显示在我的视图中。目前我正在使用jquery和ajax进行请求和响应。

刚才我正在尝试使用angularjs并使用下面的代码来获取服务器的响应，

'use strict';

angular.module('liverate', ['dataServices']);

angular.module('dataServices', []).
service('Data', ['$http', function ($http) {
    var my_Date = new Date();
    var rates = {};
     var urlBase = BASE_URL+"api/apirate.php"+"?nocache=" + my_Date.getUTCSeconds();

     this.getRates = function () {
        $http({
              method: 'GET',
              url: urlBase,
              //headers: {'Content-Type': 'application/x-www-form-urlencoded'},
              success: function(data){
                   console.log(data);
                   rates = data;
              },
              error : function(statusCode,error) {
                  console.log(error);
              }
            });
        return rates;
     };
}]);

function LiverateController($scope, $timeout, Data) {
    $scope.data = [];
    var rates = {};
    (function tick() {
        $scope.data = Data.getRates(function(){
            $timeout(tick, 1000);
        });
    })();

    And also tried bellow method

    $scope.callAtTimeout = function() {
        console.log(Data.getRates());
    }

    $timeout( function(){ $scope.callAtTimeout(); }, 1000);

};

但这对我不起作用。只是它调用单次。我需要如何使用它。请任何人帮助我。

Answer 1

您似乎并不完全了解$http / promises的使用方式。您需要返回$http返回给调用函数的承诺，或者来自该函数的派生承诺，例如下面的代码：

angular.module('dataServices', []).
service('Data', ['$http', '$q', function ($http, $q) {
  var my_Date = new Date();
  var rates = {};
  var urlBase = BASE_URL+"api/apirate.php"+"?nocache=" + my_Date.getUTCSeconds();

  this.getRates = function () {
    return $http({
       method: 'GET',
       url: urlBase,
    }).then(function(results) {
       console.log(results);
       return results.data;
    }, function(error) {
       console.log(error);
       return $q.reject(error);
    });
  };
}]);

function LiverateController($scope, $timeout, Data) {
   $scope.data = [];
   var rates = {};
   (function tick() {
     Data.getRates().then(function(data){
       $scope.data = data;
     })['finally'](function() {
       $timeout(tick, 1000);
     });
   })();
};

另外

我会倾向于使用$timeout而不是$interval，因为天真地使用$interval可能最终会破坏服务器，以免它有点慢
对$timeout的调用实际上是在finally回调中，以便在请求成功和失败的情况下运行。

如何从控制器反复调用angularjs服务来更新视图

1 个答案: