jQuery ajax, asynchronous encapsulation

Question

jQuery ajax, asynchronous encapsulation

Navigation

#1 by (4 votes)

3

I like encapsulation because it greatly reduces the source code, I have done the following regarding ajax:

custom.ajax=function(obj,funcao,view){                                                  // FUNÇÃO AJAX
    var data = {'obj':obj,'funcao':funcao};                                             // SETA OS PARAMETROS
    var retorno;                                                                        // VAR DE RETORNO
    $.ajax({type:"POST", url:view, dataType:"json", data:data,async:false,              // FAZ UM AJAX SINCRONIZADO COM A FUNCAO
        success: function(json) { retorno = json; },                                    // RETORNO DO AJAX NO SUCCESS
        error: function(json) { retorno=json; },                                        // RETORNO DO AJAX NO ERROR
        beforeSend: function() { $('body').css('cursor','wait'); },                     // RETORNO DO AJAX NO ERROR
        complete: function(){ $('body').css('cursor','default'); }
    });                                                                                 // FIM DO AJAX        
    return retorno;                                                                     // RETORNO DA FUNÇÃO
};

With this code every time I want to do an ajax I use only 1 line of code passing my params like this:

var r = custom.ajax(new Object(),'getConhecimentos','../view/cobranca/vRelacaoCobranca.php');
preencherTela(r); // para preencher o HTML.

The problem with this technique is that my page is waiting for ajax to complete, ie the asynchronous part in case parameter async: true would be the solution, the problem is that I would have to write the ajax every time, would not it have a way to encapsulate? because the rest of the programming would be inside the success parameter like this:

var funcao = 'getConhecimentos';
var obj = new Object();  
var data = {'obj':obj,'funcao':funcao};                                             // SETA OS PARAMETROS
var view = '../view/cobranca/vRelacaoCobranca.php';

$.ajax({type:"POST", url:view, dataType:"json", data:data,async:true,              // FAZ UM AJAX SINCRONIZADO COM A FUNCAO
    success: function(json) { relCob.tableStyle(json,'jqxGrid-conhec'); },                                    // RETORNO DO AJAX NO SUCCESS
    error: function(json) { console.log(json) },                                        // RETORNO DO AJAX NO ERROR
    beforeSend: function() { $('body').css('cursor','wait'); },                     // RETORNO DO AJAX NO ERROR
    complete: function(){ $('body').css('cursor','default'); }
});

My question is: would you have any way to encapsulate ajax and keep it asynchronously? ( async: true )

javascript jquery design-pattern

asked by anonymous 08.07.2015 / 20:53

1 answer

What is the difference between mouseleave and mouseout? Checking Browser Versions

score 4 · Accepted Answer

The classic way to resolve this is to pass a callback, or use the promise itself returned by Ajax. I'll show you examples.

Passing a callback

custom.ajax=function(obj,funcao,view, callback){                                                  // FUNÇÃO AJAX
    var data = {'obj':obj,'funcao':funcao};                                             // SETA OS PARAMETROS
    var retorno;                                                                        // VAR DE RETORNO
    $.ajax({type:"POST", url:view, dataType:"json", data:data,
        success: callback,                                    // RETORNO DO AJAX NO SUCCESS
        error: function(json) { retorno=json; },                                        // RETORNO DO AJAX NO ERROR
        beforeSend: function() { $('body').css('cursor','wait'); },                     // RETORNO DO AJAX NO ERROR
        complete: function(){ $('body').css('cursor','default'); }
    });                                                                                 // FIM DO AJAX        
}; 

var processa = function(json) {
    // faz algo com o json
}
custom.ajax({},'getConhecimentos','../view/cobranca/vRelacaoCobranca.php', processa);

Using promises

custom.ajax=function(obj,funcao,view){                                                  // FUNÇÃO AJAX
    var data = {'obj':obj,'funcao':funcao};                                             // SETA OS PARAMETROS
    var retorno;                                                                        // VAR DE RETORNO
    return $.ajax({type:"POST", url:view, dataType:"json", data:data,
        beforeSend: function() { $('body').css('cursor','wait'); },                     
    });                                                                                              
}; 

var processa = function(json) {
    // faz algo com o json
}
var promessa = custom.ajax({},'getConhecimentos','../view/cobranca/vRelacaoCobranca.php');
promessa.done(processa);