13

Gostaria de entender um pouco melhor as vantagens de se usar Promise!

hoje utilizo função de callback. Ex:

function a(callback) {
   $.ajax({
   ...
   })
   .done(function(data){
      callback(data)
   })
   .fail(function(data){
      callback(data)
   });
}

function b() {
   a(function(response){
     console.log(response)
   });
}

Já com Promise, ficaria algo assim:

var promise = new Promise(function(resolve, reject) {
  $.ajax({
   ...
   })
   .done(function(data){
      resolve(data)
   })
   .fail(function(data){
      reject(data)
   });
});

promise.then(function(result) {
  console.log(result);
}, function(err) {
  console.log(err);
});

Eu gostaria de saber se funcionalmente existem diferenças nos dois modelos?

3 Respostas 3

14

[...] existem [funcionalmente] diferenças nos dois modelos[?]

Fundamentalmente não. Promises são, no fundo, callbacks; funcionalmente a diferença é que o modelo de promises provê uma maneira padrão de gerência de retorno de valores e excessões, assim como um controle de fluxo via handlers.

A grande vantagem de implementação de promises é que o retorno da declaração é uma variável, o que torna o processo de encadeamento de handlers muito mais simples - permitindo, por exemplo, avaliações em cascata.

Um post (em inglês) que elabora este assunto mais a fundo pode ser encontrado em SoftwareEngineering.StackExchange.

10

Promise representa uma promessa de um resultado futuro de uma operação assíncrona. E Promises podem ser entendidos como callbacks assíncronos.

Uma das vantagens que conheço é ao usar Promise.all. Retorna uma promise que resolve quando todas as promises no argumento iterável forem resolvidas.

Promise.all([chamada1(), chamada2(), ...]).then(function(resultado) {
    //Resultado é um array contém os valores das três promises
}).catch(function(error) {
    //Se ao menos uma promise for rejeitada
}); 

Ou seja, é possível fazer n chamadas assíncronas e efetuar alguma operação após todas serem concluídas.

Em inglês uma discussão onde explicaram mais vantagens e características.

3

Uma promise é exatamente o que o nome diz, uma promessa. Sua função "promete" que vai retornar algo, esse algo pode ser um sucesso, erro, mensagem e etc.

O que você vai fazer com o que foi retornado do promise é um callback. Ou seja, uma promise retorna um dado e o callback trata esse dado.

O método Ajax do jQuery que você deu como exemplo é um exemplo de promise.

// função principal que retorna a promise
var ajax = $.ajax('url');

// promise retornou sucesso (resolve) então podemos tratar os dados
ajax.done(function( data ) {
    // do something awesome
})

// promise retornou erro (reject) então precisamos tratar o erro
ajax.fail(function( error ){
    // something went wrong
});

No exemplo que você deu não é necessário encapsular o Ajax numa promise porque o Ajax em si já é uma promise.

Veja outro exemplo de promise

var preload = function( url ) {
    return new Promise(function( resolve, reject ) {
        var image = new Image();

        image.onload  = function() {
            resolve( image );
        };

        image.onerror = function() {
            reject( Error('Error while loading image: ' + url)) ;
        };

        image.src = url;
    });
};

E para usar

var preloadImage = preload('image-path');

preloadImage.then(function() {
    // imagem carregou
});

preloadImage.catch(function() {
    // deu erro no carregamento
});

.then() e .catch() são os callbacks da promise preload

Agora veja o mesmo exemplo anterior, porém agora com callback.

var preload = function( url, success, error ) {
    var image = new Image();

    image.onload  = function() {
        success( image );
    };

    image.onerror = function() {
        error( Error('Error while loading image: ' + url)) ;
    };

    image.src = url;
};

E para usar os callbacks seria algo assim

preload('image-path', function( image ) {
    // sucesso ao carregar a imagem
}, function( error ) {
    // deu erro ao carregar a imagem
});
1
  • Boa cara! Valeu pela dica de não usar callback ou promise no ajax. Não havia notado que era só dar um return $.ajax na minha function a e usar a.done(function(){}).fail(function(){}) na function b. ;)
    – alan
    Commented 30/11/2016 às 20:02

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .