Wait for making AngularJS HTTP request

Question

For my website I'm making an http request for accessing an API. It triggers on key press event. The problem is it makes many ajax calls on each continuous key press, so for controlling this I have to add a small timeout like a 300 ms. I have made http call as follows, how can I modify this now?

var req = {
    method: 'GET',
    url: 'url of api',
    headers: {
        "Key": "keyofapi",
        "Accept": "application/json"
    },
};

$http(req)
    .success(function(data, status, headers, config) {
    })
    .error(function(data, status, headers, config) {
    });

@Jan I want to add a delay while making requests , check this link s6.postimg.org/bw2uuera9/svo.png — droidev
– droidev, Commented Jan 22, 2015 at 6:58
@SebastiánEspinosa I didn't get , what you mean, can you describe please ? — droidev
– droidev, Commented Jan 22, 2015 at 8:12
i mean something like a flag, when the function is running set the flag to false, when is ready to run again set it to true, and then you can use that flag on a if where the function is triggered, so the function only runs when its not running.. — Sebastián Espinosa
– Sebastián Espinosa, Commented Jan 22, 2015 at 9:32

Janaki Sathiyamurthy · Accepted Answer · 2015-01-22 07:15:29Z

1

Wrap your function inside $timeout function, mention the timeout (P.S it takes value in ms). Dont forget to inject $timeout in your controller parameters. Try this,

$timeout(function () {
        $http({
                method: 'POST', //No I18N
                url: 'your URL', //No I18N
                params: { 
                    parameters if needed
                }
            }).success(function (data, status, headers, config) {
                //Do the required
            });
        }, 2500);

answered Jan 22, 2015 at 7:15

Janaki Sathiyamurthy

5881 gold badge6 silver badges21 bronze badges

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

Comments

Ifch0o1 · Accepted Answer · 2015-01-22 08:14:54Z

I actually recommend to do a factory or service that watching if you have active request and you waiting for it.

yourApp.factory('apiReqeust', ['$http', function($http) {
  // If you want to complete all requests that you sending,
  // make this varable an empty array and push every new request inside it.
  var waitingRequest = null; // Or quenuedRequests = [];
  var isWorking = false;
  // In my case I will not make an array, and will have only one request that will wait.
  // I mean the last attempted request.
  // This is perfect for an Autocomplete API

  function request(options, callback) {
    if (isWorking) {
      // If you are already running request at this time.
      // Replace waiting request with this one. (this one is newer request)
      waitingRequest = {options: options, callback: callback}
      // EDIT! I forgot about the return statement.
      // You need to stop, otherwise the request will be executed anyway.
      return;
    }
    isWorking = true;

    $http(options).success(function(data) {
      // When the request ends, tell that you are not working
      // So you can execute next request immediately
      isWorking = false;

      // execute callback with data parameter.
      callback(data);

      // If you have waiting request yet. execute it.
      if (waitingRequest) {
        request(waitingRequest.options, waitingRequest.callback);

        waitingRequest = null;
      }
    }).error(function(err) {
      isWorking = false;
      callback(null, err);
      if (waitingRequest) {
        request(waitingRequest.options, waitingRequest.callback);
      }
    });
  }
  return request;
});

The usage of this is:

// Factory or controller or whatever that can depend on above factory
youApp.factory('another-whatever', ['apiRequest', function(apiRequest) {
  options = {'Some': 'HttpOptions'};
  apiRequest(options, function(data, err) {
    if (err) throw new Error(err);
    // And here you doing what you want with the data.
  });
}]);

I am not tested this code. I don't know if it's working. But I hope you got the idea.

See my edit in comments. I forgot the return statement at line 17.

user4510143 · Accepted Answer · 2015-02-07 09:17:07Z

I actually recommend to do a factory or service that watching if you have active request and you waiting for it.

 function request(options, callback) {
    if (isWorking) {
      // If you are already running request at this time.
      // Replace waiting request with this one. (this one is newer request)
      waitingRequest = {options: options, callback: callback}
      // EDIT! I forgot about the return statement.
      // You need to stop, otherwise the request will be executed anyway.
      return;
    }
    isWorking = true;

    $http(options).success(function(data) {
      // When the request ends, tell that you are not working
      // So you can execute next request immediately
      isWorking = false;

      // execute callback with data parameter.
      callback(data);

      // If you have waiting request yet. execute it.
      if (waitingRequest) {
        request(waitingRequest.options, waitingRequest.callback);

        waitingRequest = null;
      }
    }).error(function(err) {
      isWorking = false;
      callback(null, err);
      if (waitingRequest) {
        request(waitingRequest.options, waitingRequest.callback);
      }
    });
  }
  return request;
});

The usage of this is:

// Factory or controller or whatever that can depend on above factory
youApp.factory('another-whatever', ['apiRequest', function(apiRequest) {
  options = {'Some': 'HttpOptions'};
  apiRequest(options, function(data, err) {
    if (err) throw new Error(err);
    // And here you doing what you want with the data.
  });
}]);

Collectives™ on Stack Overflow

Wait for making AngularJS HTTP request

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related