Using $timeout for repetitive rest calls in angular js

Question

I am trying to implement a service which makes a rest call every 5 seconds. Previously I was using $interval but I realized using could get in troubles if a request takes longer than 5 sec because of internet connection problems.

    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 is still called just once.

How can we use timeout for multiple calls and using promises(I am not very familiar with promises)

Stepan Kasyanenko · Accepted Answer · 2016-11-03 11:30:35Z

1

If you want to stick to $timeout, you should call the function recursively, with a timeout, then request to API is finished.

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);

Example

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>

edited Nov 3, 2016 at 11:30

answered Nov 3, 2016 at 11:22

Stepan Kasyanenko

3,1761 gold badge17 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Abdul Salam Shaikh Over a year ago

While using finally, I often get this error Uncaught TypeError: Cannot read property 'finally' of undefined(…)

Stepan Kasyanenko Over a year ago

@AbdulSalamShaikh Function requestFromApi need return a promise. Show code for requestFromApi function.

Abdul Salam Shaikh Over a year ago

stackoverflow.com/questions/40630494/…

sisyphus · Accepted Answer · 2016-11-03 10:54:56Z

0

You can't use $timeOut for multiple calls.As per the docs, the return value of calling $timeout is a promise, which will be resolved when the delay has passed and the timeout function, if provided, is executed. In short, it will be executed once, after the time delay has lapsed

What you were previously using $interval is correct for your requirement. To avoid the problem that you are suggesting ( slow internet, and a new call before the previous is completed), use a flag.

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

Now use this login within your $interval function call. Hope this helps.

answered Nov 3, 2016 at 10:54

sisyphus

4625 silver badges13 bronze badges

2 Comments

Abdul Salam Shaikh Over a year ago

How can i use incorporate promise to this code, if you can throw some light on that ?

sisyphus Over a year ago

The promise would be returned from a service where the http call should be made. The flag should be in your controller which calls the service. And the $interval also within controller which would call the service based on the flag condition

Stepan Kasyanenko · Accepted Answer · 2016-11-16 18:17:04Z

0

For multiple calls you must use $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
}

For Promise in angularJs check the link...

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

edited Nov 16, 2016 at 18:17

Stepan Kasyanenko

3,1761 gold badge17 silver badges23 bronze badges

answered Nov 3, 2016 at 11:00

IftekharDani

3,7191 gold badge18 silver badges21 bronze badges

Collectives™ on Stack Overflow

Using $timeout for repetitive rest calls in angular js

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related