CODEWITHSUNDEEP
javascriptjqueryajax
Undermine2k
Undermine2k

Reputation: 1491

ajax deferred chaining call

I'm a bit confused I am using the result of callone() to modify a global object(I'm not sure of a better way to do this) trying to accomplish this with deferred. By the time time I calltwo() the global object should be modified with the new data

var obj = {};

var id = obj.id;
//global object 
    $.when(callone(obj)).then(calltwo(id),function(data)
    {

    });

- Ajax function :1

function callone(requiredData)
{
 var d = new $.Deferred();
 var ajaxCall1 =   $.ajax({
            type:"POST",
            url: 'AB/',
            data: requiredData, 
            success: function(data) {

               //return data to the callee?

                d.resolve(p_obj);
                //set ID on the object
                obj.id = data.id;
                return obj;

            },
            error: function(jqXHR, textStatus, errorThrown) {
                alert(textStatus + ': ' + errorThrown);
            },
            always: function(data)  {  }
        });

}

function calltwo(id from callback one)
{



}

Upvotes: 2

Views: 53

Answers (1)

jfriend00
jfriend00

Reputation: 707218

I've included a much simpler implementation below.

callone() must return a deferred or promise for you to wait on it or chain other operations to it and you can just use the promise that $.ajax() already returns rather than creating your own.

Further, there is no reason to use $.when() here because it really only adds value when you're trying to wait on multiple promises running in parallel which isn't your case at all. So, you can just use the .then() handler on the individual promises you already have.

In addition, you really don't want to use globals when processing async operations. You can chain the promises and pass the data right through the promises.

Here's what callone() should look like:

function callone(requiredData) {
    return $.ajax({
        type: "POST",
        url: 'AB/',
        data: requiredData
    });
}

function calltwo(...) {
    // similar to callone
    // returns promise from $.ajax()
}

callone(...).then(function(data) {
    // when callone is done, use the id from its result
    // and pass that to calltwo
    return calltwo(data.id);
}).then(function(data) {
    // process result from calltwo here
}, function(err) {
    // ajax error here
});

Notice that this code isn't creating any new Deferred objects. It's just using the promise that is already returned from $.ajax(). Note also that it isn't use success: or error: handlers either because those also come through the promises.

Also, note that return a promise from within a .then() handler automatically chains it into the previous promise so the previous promise won't be resolved until the newly returned promise is also resolved. This allows you to keep the chain going.

Also, note that returning data from an async callback function does not return data back to the caller of the original function so your attempt to return something from the success: handler was not accomplishing anything. Instead, use promises and return data through the promises as they are specifically designed to get async data back to the .then() handlers.

Upvotes: 3

Related Questions