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?

Answer 1

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