Replacing synchronous $.ajax() call with AngularJS $http or native javascript (xhr)

Question

I have the following function

function getDataAvailablity() {
    var isDataAvailable;
    $.ajax({
        url: 'http://someurl/data.json',
        async: false,
        dataType: json
    }).success(function() {
        isDataAvailable = true;
    }).failure(function() {
        isDataAvailable = false;
    });
    return isDataAvaialble;
}

Is it possible to replace the code within the getDataAvailability() to work without async false ajax call.

Also function signature of getDataAvailablity should not change as already this function is used in many places, so its difficult to change at all the places where this API is being used.

it is preferred to not have jQuery. We can use AngularJS or native javascript.

the solution provided in various other threads requires either change of the signature of the function. If i use callback then i need to ask my consumers to pass a callback function as argument.

and if i use a deferred object or promise then consumers needs to change there code to use .then function in addition to getDataAvailability().

this funciton should return a boolean and takes no argument and should be consumable just by calling

var flag = getDataAvailability()

Please also let me know incase you think this is not possible.

Solution I am currently using requires changing function signature and is as below:

// API
    function getDataAvailablity() {
        var deferred = $q.defer();

        $http.get('http://someurl/data.json');
        return deferred.promise();
    }

// calling this API
getDataAvailability().then(success, error);

function success(){
   // on success
}

funciton error() {
  // on error
}

Please provide some approach which do not require changing function signature. and comment if such a solution is possible or not.

I have updated in the question why my questions is different from the previously asked questions by others. — Tarun, May 07 '15 at 09:24

Manuel Bitto · Accepted Answer · 2015-05-07T10:00:39.300

If your request is going to be asynchronous you have to deal with asynchronous response. A good way to handle it is using deferreds. Take a look to this example where i'm using Q library (https://github.com/kriskowal/q):

function getDataAvailablity() {
    var request = new XMLHttpRequest();
    var deferred = Q.defer();

    request.open("GET", 'http://someurl/data.json', true);
    request.onload = onload;
    request.onerror = onerror;
    request.onprogress = onprogress;
    request.send();

    function onload() {
        if (request.status === 200) {
            deferred.resolve(request.responseText);
        } else {
            deferred.reject(new Error("Status code was " + request.status));
        }
    }

    function onerror() {
        deferred.reject(new Error("Can't XHR " + JSON.stringify(url)));
    }

    function onprogress(event) {
        deferred.notify(event.loaded / event.total);
    }

    return deferred.promise;
}

// Below is an example of how to use this getDataAvailablity function:

getDataAvailablity().then(
    function (responseText) {
        // If the HTTP response returns 200 OK, log the response text.
        console.log(responseText);
    }, function (error) {
        // If there's an error or a non-200 status code, log the error.
        console.error(error);
    }
);

edit

No, you cannot deal with asynchronous request without changing your code

Replacing synchronous $.ajax() call with AngularJS $http or native javascript (xhr)

1 Answers1