Async parameter of jQuery.ajax is obsolete, what now?

Question

I’m developing a Javascript application and need to queue for requests ajax, and I need one to be done after the other, because they manipulate some variables of my scope. The parameter async of jQuery.ajax is obsolete, how to make executions run in mode sync?

I cannot post the code in full because it belongs to the company, but I can illustrate.

What do I have:

(function(){
    var var10;
    var var20;
    var var30;
    var var40;

    function func10(){
        return $.ajax({
            url: '/path/to/file',
            success: function(data){
                /* Faça algo */
                var10 = data.algumacoisa;
            }
        })
    }

    function func20(p){
        return $.ajax({
            url: '/path/to/file',
            data: {'algumacoisa': p},
            success: function(data){
                /* Faça algo */
                var20 = data.algumacoisa;
            }
        })
    }

    function func30(p){
        return $.ajax({
            url: '/path/to/file',
            data: {'algumacoisa': p},
            success: function(data){
                /* Faça algo */
                var30 = data.algumacoisa;
            }
        })
    }

    function func40(p){
        return $.ajax({
            url: '/path/to/file',
            data: {'algumacoisa': p},
            success: function(data){
                /* Faça algo */
                var40 = data.algumacoisa;
            }
        })
    }

})();

---

What I want:

I need all functions to be carried out in order func10().func20(var10).func30(var20).func40(var30) and also to respect success, namely after each success execute the next function. I’m not sure if the method $.when does this because the functions cannot be performed parallel.

---

What I don’t want:

I don’t want to have to call every function on success of the previous:

function func2(p){
    return $.ajax({
        url: '/path/to/file',
        data: {'algumacoisa': p},
        success: function(data){
            /* Faça algo */
            var20 = data.algumacoisa;
            func30(var20);
        }
    })
}

'Cause if I need to put another call in the middle of the line, I don’t want to go out digging through the code and have to keep changing all the flames, I just want to move the line, for example:

func10().func15(var10).func20(var15).func30(var20).func40(var30)

---

Is it possible to do this? If so, what is the best way? If not, why?

Answer 1

You can have an array with the list of functions you want to execute and go running/emptying the list as a callback.

The idea would be:

var funcArray = [function (data) {
    /* Faça algo */
    return data.algumacoisa;
}, function (data) {
    /* Faça algo */
    return data.algumacoisa;

}, function (data) {
    /* Faça algo */
    return data.algumacoisa;

}, function (data) {
    /* Faça algo */
    return data.algumacoisa;
}];

function tratadorAJAX(dataAnterior, next){
    if (!next) return;
    $.ajax({
        url: '/path/to/file',
        data: {'dataAnterior': dataAnterior},
        success: function(data){
            var proximaData = next(data);
            tratadorAJAX(proximaData, funcArray.pop());
        }
    })
}
tratadorAJAX(dataInicial, funcArray.pop());

Answer 2

status = (function(){ 
    funcaoMain();
 });

verificando = status.done(function () {
    funcaoOptional();
});
concluindo = verificando.done(function () {
    funcaoterceira();
});