mardi 4 août 2015

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 method get the response from the server.

Why? Is this an angular behavior?

Aucun commentaire:

Enregistrer un commentaire