synchronous http call in angularJS

Question

I have the following scenario, I need data from a particular url. I have written a function which takes parameter 'url'. Inside the function I have the $http.get method which makes a call to the url. The data is to be returned to the calling function

var getData = function (url) {
    var data = "";

    $http.get(url)
        .success( function(response, status, headers, config) {
             data = response;
        })
        .error(function(errResp) {
             console.log("error fetching url");
        });
    return data;
}

The problem is as follows, $http.get is asynchronous, before the response is fetched, the function returns. Therefore the calling function gets the data as empty string. How do I force the function not to return until the data has been fetched from the url?

You may return success and error function itself which can be used further... — binariedMe
– binariedMe, Commented Jul 20, 2015 at 5:43

Raman Sahasi · Accepted Answer · 2017-05-18 08:43:31Z

23

Take a look at promises to overcome such issues, because they are used all over the place, in angular world.

You need to use $q

var getData = function (url) {
    var data = "";
    var deferred = $q.defer();

    $http.get(url)
        .success( function(response, status, headers, config) {
             deferred.resolve(response);
        })
        .error(function(errResp) {
             deferred.reject({ message: "Really bad" });
        });
    return deferred.promise;
}

Here's a nice article on promises and $q

UPDATE:

FYI, $http service itself returns a promise, so $q is not necessarily required in this scenario(and hence an anti-pattern).

But do not let this be the reason to skip reading about $q and promises.

So the above code is equivalent to following:

var getData = function (url) {
    var data = "";
    return $http.get(url);
}

edited May 18, 2017 at 8:43

Raman Sahasi

32k9 gold badges63 silver badges74 bronze badges

answered Jul 20, 2015 at 5:43

nalinc

7,43327 silver badges34 bronze badges

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

7 Comments

clearScreen Over a year ago

how do I access the value of the promise?

Matt Herbstritt Over a year ago

It's common anti-pattern see: github.com/petkaantonov/bluebird/wiki/Promise-anti-patterns

nalinc Over a year ago

Yes I know. But I tried to keep things simple for OP. A statement like "$http itself returns a promise" could confuse anyone if one is not aware of what promises are on the first hand.

Carlos Calla Over a year ago

Why is this answer marked as correct? This solutions does not make the http request synchronous, it is still asynchronous.

nalinc Over a year ago

@CarlosCalla: Did I mention this is a 'synchronous' technique at any place in my solution? You probably just read the question title but didn't see OP's actual requirement. In case you missed it, here's the gist to his problem. OP is actually returning something from the function, whose value is indeed inferred "async". See how do I force the function not to return until the data has been fetched from the url part. Solution to this problem is NOT making the code synchronous. Hence I mentioned 'promises' in answer.

|

akashrajkn · Accepted Answer · 2015-07-21 01:48:55Z

9

You can use $q.all() method also to solve this problem

var requestPromise = [];

var getData = function (url) {
    var data = "";

    var httpPromise = $http.get(url)
        .success( function(response, status, headers, config) {
             data = response;
        })
        .error(function(errResp) {
             console.log("error fetching url");
        });

    requestPromise.push(httpPromise);
}

in the calling function

$q.all(requestPromise).then(function(data) {

    //this is entered only after http.get is successful
});

make sure to inject $q as a dependency. Hope it helps

answered Jul 21, 2015 at 1:48

akashrajkn

2,3232 gold badges24 silver badges47 bronze badges

Comments

Matt Herbstritt · Accepted Answer · 2015-07-20 06:00:06Z

8

You function seems redundant. Just use $http.get(url), since you aren't really doing anything else before you use it anyway.

var url = 'foo/bar';

$http
    .get(url)
    .success( function(response, status, headers, config) {
        $scope.data = response;
    })
    .error(function(errResp) {
        console.log("error fetching url");
    });

Or if you need to access the promise later just assign it to variable;

var promise = $http.get(url);

// some other code..

promise.then(function(data){
   //.. do something with data
});

edited Jul 20, 2015 at 6:00

answered Jul 20, 2015 at 5:53

Matt Herbstritt

4,8825 gold badges29 silver badges33 bronze badges

Comments

Marty · Accepted Answer · 2015-07-20 05:42:27Z

4

A typical way to do what you want is like so:

var getData = function(url, callback) {
    $http.get(url).success(function(response) {
        callback && callback(response);
    });
};

Used like:

getData('/endpoint', function(data) {
    console.log(data);
});

answered Jul 20, 2015 at 5:42

Marty

39.5k19 gold badges97 silver badges164 bronze badges

Collectives™ on Stack Overflow

synchronous http call in angularJS

4 Answers 4

7 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

7 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related