$.ajax inside a single function to return result and promise?

Question

I have a single function making ajax calls to retrieve data. The issue I'm having is making nested ajax calls where one call depends on other and $.wait().then() is not really working. Is there any solution to my issue. Here is an example...

function _Ajax(params){
if(params == ''){
    alert('no post params');
    return;
}
var xdata;
$.ajax({
    type: "POST",
    url: "/xml/",
    async: false,
    data: params,
    dataType: "xml",
    success: function(xml){
        xdata = xml;
    },
    error: function() {
        alert("An error occurred while processing XML file. Params:" + objToString(params));
    }
    });
    return xdata;
}

function A(a,b){
    _Ajax({a:a,b:b});
}
function B(a,b,c){
    _Ajax({a:a,b:b,c:c});
}
function C(a,b){
    A(a,b);
    B(a,b);
}
function D(a,b){
    _Ajax({a:a,b:b});
}
function E(){
    $.when(C(a,b)).then{function(){ D(a,b);});
}

I also tried to change async to true and it completely fails without returning any data. Thanks

Possible duplicate of [How do I return the response from an asynchronous call?](http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Liam, May 18 '17 at 16:19
`_Ajax` should return the result of `$.ajax` `A`, `B` etc needs to return the result of `_Ajax` and the `success` need to happen outside of all of this.. Basically read the duplicate, it's all there — Liam, May 18 '17 at 16:22

Bergi · Answer 1 · 2017-05-31T22:08:02.560

1

$.when doesn't magically wait for anything asynchronous, you need to pass promises to it - and for that, all of your functions need to actually return them:

function _Ajax(params){
    if(params == ''){
        return $.Deferred().reject('no post params').promise();
    }
    return $.ajax({
        type: "POST",
        url: "/xml/",
        data: params,
        dataType: "xml"
    }).catch(function() {
        throw "An error occurred while processing XML file. Params:" + objToString(params));
    });
}

function A(a,b){
    return _Ajax({a:a,b:b});
}
function B(a,b,c){
    return _Ajax({a:a,b:b,c:c});
}
function C(a,b){
    return $.when(A(a,b), B(a,b));
}
function D(a,b){
    return _Ajax({a:a,b:b});
}
function E(){
    return C(a,b).then{function([xdata1], [xdata2]){ return D(a,b); });
}

edited May 31 '17 at 22:08

answered May 20 '17 at 20:20

Bergi

630,263
148
957
1,375

The biggest problem here is that _Ajax function returns promise but I need it to return XML result as well. I assume one of the solution is to return an array? – Joseph May 31 '17 at 18:12
@Joseph It should return a promise *for* the XML result, doesn't it? You can access it through the parameters of your `then` callback. Where were you going to use `xdata`? – Bergi May 31 '17 at 18:17
There are hundreds of existing functions that process this xdata parameter in different manner... – Joseph May 31 '17 at 18:52
@Joseph But surely it's a parameter in each of them, not a global variable? Where in the promise chain were you calling them? – Bergi May 31 '17 at 19:04
yeah it is a parameter in. The functionality doesn't use promises at this time as it wasn't needed till now – Joseph May 31 '17 at 20:03
In any case, you will now need to call it from the promise callback. Btw, [jQuery is weird when you pass `ajax` promises into `when`](https://stackoverflow.com/a/19090635/1048572) – Bergi May 31 '17 at 22:08

$.ajax inside a single function to return result and promise?

1 Answers1