Ajax return response

Question

I'm trying to create a reusable function where I could pass arg, and based on that execute ajax call. So far this is what I got:

ajaxFunc: function(url, method, args) {
    return {
        var URL = url,
            METHOD = method,
            ARGS = args,
            ERROR = error,
            index = -1,
            ajaxResponse,
            AJAX = function() {
                var url = URL + ((args == null) ? '' : ('/' + ARGS )),
                    data = (METHOD == 'post') ? ARGS[index] : undefined,
                    thisObject = this;

                $.ajax({
                    url:url,
                    method:METHOD,
                    data: data,
                    dataType: 'json',
                    error: function(jqXHR, textStatus, error) {
                        console.error(jqXHR, textStatus, error)
                    },
                    success: function(response) {
                        ajaxResponse = response;
                    }
                });

                return ajaxResponse;
            };

        AJAX();
    };
};

My problem is, how can i get the return to work? - when I call the function I can see the ajax getting call, but the function never return the response.

E.g: If I do MAIN.util.ajaxFunc('http://url.com/', 'get', null); I get nothing in return. I would like to find a way where I could make a ajaxFunc call and after that check for the response, if the response.length do something.

What I'm doing wrong?

Use a callback, just as jQuery does, and all of evented JavaScript. There’s no nice way to turn something inherently asynchronous synchronous, and your users will thank you for not doing it. — Ry-, Jan 14 '14 at 22:52

score 1 · Answer 1 · answered Jan 14 '14 at 22:56

The problem is that ajax is async. I would do something like this:

Use a deferred:

ajaxFunc: function (url, method, args) {
    //...

    return $.ajax({
        url: url,
        method: METHOD,
        data: data,
        dataType: 'json',
        error: function (jqXHR, textStatus, error) {
            console.error(jqXHR, textStatus, error)
        }
    });
};

MAIN.util.ajaxFunc('http://url.com/', 'get', null).done(function(response) {

});

Or use a callbacK:

ajaxFunc: function (url, method, args, callback) {
    //...

    return $.ajax({
        url: url,
        method: METHOD,
        data: data,
        dataType: 'json',
        error: function (jqXHR, textStatus, error) {
            console.error(jqXHR, textStatus, error)
        },
        success: function (response) {
            callback(response);
        }
    });
};

MAIN.util.ajaxFunc('http://url.com/', 'get', function(response) {

});

score 0 · Answer 2 · answered Jan 14 '14 at 22:53

With asynchronous operations like this, don't return the response. Instead, pass the data to another function that needs it. Any functions that chain from there will have to be a part of that new chain, like this:

success: function(response) {
  myFunction(response);
}

Rather than using a callback like that, you could instead use promises. That accomplishes the same thing, but avoids function nesting. It looks like this:

$.ajax({
    url: url,
    method: METHOD,
    data: data,
    dataType: 'json',
}).then(function (data) {
    myFunction(data);
});

Read more about promises here: http://api.jquery.com/category/deferred-object/

Ajax return response

2 Answers2