CODEWITHSUNDEEP
javascriptajaxangularjs
Misters
Misters

Reputation: 1347

Can't execute 2 $http calls in angularjs at the same time

I am implementing long polling to know the state of some long running event on the server side. I create my own factory that will notify me when a server event triggers. Here is the factory.

.factory("$httpPolling", function ($http) {

        function $httpPolling($httpService) {

            var _responseListener, _finishListener;
            var cancelCall = false;
            var _pollId;

            function waitForServerCall(id) {
                console.log("executing waitForServerCall");
                    $httpService.get(href("~/polling/" + id))
                        .success(function (response) {
                            var cancelPolling = _responseListener(response);
                            if (cancelPolling || cancelCall) {
                                return;
                            }
                            else {
                                waitForServerCall(id);
                            }
                    });
                };

                function _sendData(httpMethod, url) {

                    var pollingId = guid();
                    _pollId = pollingId;
                    if (url.split("?").length == 2) {
                        url += "&pollid=" + pollingId;
                    }
                    else {
                        url += "?pollid=" + pollingId;
                    }


                    if (httpMethod == 0) {
                        $httpService.get(url).success(function (response) {
                            if (_finishListener) {
                                _finishListener(response);
                            }

                            cancelCall = true;
                        });
                    }
                    else {
                        $httpService.post(url).success(function (response) {
                            if (_finishListener) {
                                _finishListener(response);
                            }

                            cancelCall = true;
                        });
                    }
                }
                var $self = this;

                this.get = function (url) {
                    _sendData(0,url);
                    return $self;
                };

                this.post = function (url) {
                    _sendData(1, url);
                    return $self;
                };

                this.listen = function (_listener) {
                    _responseListener = _listener;
                    waitForServerCall(_pollId);
                    return $self;
                }

                this.finish = function (_finish) {
                    _finishListener = _finish;
                    return $self;
                }

            }

        return new $httpPolling($http);
    });

Where the sintax of usage should be:

$httpPolling.get("url")
.listen(function(event){
// fires when server event happend
})
.finish(function(response){
// fires when the long running process finish
});

The problem is that _sendData method does not execute asynchronously because the waitForServerCall only executes the ajax call when the _sendData(long running process) method get the response from the server.

Why? Is this an angular behavior?

Upvotes: 0

Views: 132

Answers (1)

Ozan Tabak
Ozan Tabak

Reputation: 672

Angular $httpProvider has an option provided for async http calls, which is set to false as default value. Try

app.config(function ($httpProvider) {
  $httpProvider.useApplyAsync(true);
});

Upvotes: 1

Related Questions