jQuery Promise for Ajax call

Question

I think/hope I am missing something regarding the promise programming paradigm. I run the following code on jQuery because I want to get the data from URL_1 and then (on success) to get the data2 from URL_2. The other variables come the the context surrounding this piece of code.

However, what I get is the data of the URL_1 twice!!

.ajax({
    url: URL_1,
    type: "GET",
    async: false,
    cache: false
}).then(function (data) {
    myObj = process(otherObj, data, URL_1);
    return $.ajax({
        url: URL_2,
        type: "GET",
        async: false,
        cache: false
    });
}).done(function (data2) {
    myObj2 = process_more(data2, URL_2, someObj);
    myCounter--;
    if (myCounter== 0) {
        console.log("%%%% COMPLETE %%%%");
    }
});

Thank you in advance for your time!!

Pan

Don't use `async: false`. It might even lead to problems with the promises. — Bergi, Jul 22 '14 at 12:27
What do you need the `myCounter` for? Is there some looping involved? Are `URL_1` and `URL_2` constants? Can you show us the code of `process` and `process_more`? — Bergi, Jul 22 '14 at 12:32
That's because jQuery's Deferred isn't Promises/A+ compatible and can't obivously resolve the promise with another promise. @adeneo's answer is right but I would consider using another library for promises. ;-) — Razem, Jul 22 '14 at 12:35
@Radek - that's what I thought, I was pretty sure you couldn't return a new promise to the chain inside `.then`, but testing shows you actually can -> **http://jsfiddle.net/4mm4E/** — adeneo, Jul 22 '14 at 12:39
Then again, the code is a mess, all the variables look like they are global, there's a counter for some strange reason, and it's not really asynchronous as that's been turned of, so god knows what's going on ? — adeneo, Jul 22 '14 at 12:41
So then just probably remove the `async: false` part and it should work. — Razem, Jul 22 '14 at 12:43
Does the last example, *chained tasks* help? : http://api.jquery.com/deferred.then/ — mikedidthis, Jul 22 '14 at 12:52
You are probably right abobut the `async: false` still the code works. I checked the jQuery version and it was before 1.8, which means that the promise/deferred model is "broken" wrt the original promise model. I replaced jquery with the latest version and now it is working ok. — Panais, Jul 22 '14 at 12:57
@Panais you might want to consider Bluebird promises or even native promises instead of jQuery's which are problematic in that sort of thing and error handling. — Benjamin Gruenbaum, Jul 22 '14 at 13:00

score 2 · Accepted Answer · answered Jul 22 '14 at 13:06

As it turns out, the code works just fine as long as the jQuery version is greater than 1.8 (which I knew but hadn't noticed that I was using the last version). I replaced jQuery with the latest version and everything is working as expected. However @Bergi is right about async:false being useless or even cause problems.

In earlier versions of jQuery the promise/deferred model is "broken" and is not working as expected/should w.r.t. the original promise model ( https://www.promisejs.org/ ).

See also: http://api.jquery.com/deferred.then/

The jQuery promises are _still_ broken, just less so - see http://stackoverflow.com/questions/23744612/problems-inherent-to-jquery-deferred — Benjamin Gruenbaum, Jul 22 '14 at 13:09

score 0 · Answer 2 · answered Nov 29 '17 at 17:54

I solved it like this:

for (var i = 0; i < json.length; i++) {

    if(json[i].university_name !== '' && json[i].state_code !== ''){

        $.when(
            $.ajax({
                async: false,
                url: "validateUniversityExist.php",
                method: 'post',
                dataType: 'json',
                data:{
                    'name': json[i].university_name,
                    'state_code' : json[i].state_code
                }
            })).then(function( resp, textStatus, jqXHR ) {

                if(resp.id_university !== '' || resp.id_university !== undefined){

                    if (json[i].record_status == 3){

                        $.ajax({
                            url: "createNewBenefits.php",
                            method: 'post',
                            dataType: 'json',
                            data:{
                                'id_university': resp.id_university,
                                'state_code' : json[i].state_code,
                                'updated' : json[i].updated,
                                'id_visa' : json[i].visa_type,
                                'record_status' : json[i].record_status,
                                'mandatory' : json[i].mandatory,
                                'aca' : json[i].aca
                            }
                        }); // end insert complete record ajax

                    }

                }

            }); // end university when ajax
    }


} // end for

Using when and then. https://api.jquery.com/jquery.when/

jQuery Promise for Ajax call

2 Answers2