使用$ timeout进行角度js中的重复休息调用

时间:2016-11-03 10:45:40

标签: javascript angularjs

我正在尝试实施一个每5秒进行一次休息呼叫的服务。以前我使用的是$ interval但是我意识到如果因为互联网连接问题请求的时间超过5秒,使用可能会遇到麻烦。

    service.fetchData= function () {
        //UpdateHandler is my handler function which just fills my json array
        restApiService.requestFromApi("REST" + '?latitude=' + latestCoords.latitude + '&longitude=' + latestCoords.longitude + '&radius=' + config.radiusInMetres, updateHandler);
    };

    $timeout(service.fetchData, 5000);

fetchData仍然只调用一次。

我们如何使用超时来进行多次调用并使用promises(我对promises不是很熟悉)

3 个答案:

答案 0 :(得分:1)

如果你想坚持$timeout,你应该以递归的方式递归调用函数,然后完成对API的请求。

service.fetchData= function fetchData() {
    //UpdateHandler is my handler function which just fills my json array
    restApiService.requestFromApi("REST" + '?latitude=' + latestCoords.latitude + '&longitude=' + latestCoords.longitude + '&radius=' + config.radiusInMetres, updateHandler)
    .finally(function(){ 
          $timeout(fetchData, 5000)// Call new fetchData after finish previous
         });
};

$timeout(service.fetchData, 5000);

实施例

angular.module('ExampleApp', [])
  .controller('ExampleController', function(restApiService, $timeout) {
    var vm = this;
    this.fetchData = function() {
      console.log("start request");
      restApiService.requestFromApi("data")
        .then(function() {
          console.log("success response");
        })
        .finally(function() {
          console.log("request again");
          fetchByTimeout();// Call new fetchData after finish previous
        });
    };

    function fetchByTimeout() {
      $timeout(vm.fetchData, 5000);
    }
    fetchByTimeout();
  })
  // Service for simulate long API call
  .service("restApiService", function($q, $timeout) {
    return {
      requestFromApi: function(request) {
        var defer = $q.defer();
        //simulate 10 seconds API call
        $timeout(defer.resolve, 10000);
        return defer.promise;
      }
    }
  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="ExampleApp">
  <div ng-controller="ExampleController as vm">

  </div>
</div>

答案 1 :(得分:0)

你不能使用$timeOut进行多次调用。根据docs,调用$ timeout的返回值是一个promise,当延迟已经过去并且超时函数将被解析如果提供,则执行。简而言之,它将在延迟时间结束后执行一次

您之前使用$interval的内容对您的要求是正确的。为避免您提出的问题(慢速互联网,以及之前的新呼叫完成),请使用标记。

//if(flag is false)
// set flag to true and make http call 
// upon return from call, set flag to false

现在在$interval函数调用中使用此登录名。希望这会有所帮助。

答案 2 :(得分:0)

对于多个通话,您必须使用$ interval。

var myapp = angular.module("myapp", []);

myapp.controller("MyController", function($scope, $interval){

    $interval(isLoggedIn, 5000);

});

function isLoggedIn() {
    console.log("Interval occurred");
    // call your service method`enter code here` here
}

对于angularJs中的Promise,请检查链接......

http://haroldrv.com/2015/02/understanding-angularjs-q-service-and-promises/