47

Faz um tempo estou tentando aprender a usar promessas e programação assíncrona em JavaScript, mas até agora não tive muito sucesso nisso. Já entendi que existem funções que retornam as tais promessas e que então é possível encaixar um callback no método then do objeto retornado. Também sei construir funções que retornam promessas usando a biblioteca Q.js.

Meu problema é que não sei como usar as promessas na prática. Sempre que tento vira uma confusão e acabo tendo um monte de then's aninhados e na maioria das vezes nada funciona. Sem falar que é extremamente comum que eu caia em situações do seguinte tipo: preciso de certos dados que são carregados do servidor, essa chamada retorna uma promessa, mas eu preciso dos dados em uma função que é executada logo em seguida.

Na verdade não estou conseguindo pensar do jeito certo com programação assincrona e promessas. É muito natural pensar daquela forma "primeiro acontece isso e em seguida tem que acontecer aquilo", mas parece muito estranho pensar "alguma hora vai acontecer isso e nem sabemos quando vai acabar e precisa acontecer uma outra coisa que depende da primeira". Alguém poderia dar algumas dicas/referências pra pegar o jeito mesmo disso?

1

2 Respostas 2

42
+50

Na realidade, se seu programa estiver bem estruturado a forma de raciocínio ("primeiro acontece isso e em seguida tem que acontecer aquilo") não é assim tão diferente. Imagine uma função do tipo:

function f() {
    var x = prompt("Digite x");
    var y = x * x;
    alert(y);
    console.log("pronto");
}

Há 4 instruções sendo executadas, e cada uma delas tem que acontecer depois da anterior. Suponha que você coloque cada uma delas em uma função (nesse caso é overkill, mas em geral se uma função é muito grande faz sentido quebrá-la em funções menores, certo?):

function f() {
    var x, y;

    function a() { x = prompt("Digite x"); }
    function b() { y = X * x; }
    function c() { alert(y); }
    function d() { console.log("pronto"); }

    a();
    b();
    c();
    d();
}

Nesse caso eu me aproveitei do fato que funções definidas dentro de outras têm acesso às suas variáveis locais. Mas eu poderia também usar o valor de retorno de uma como parâmetro pra outra:

function f() {
    function a() { return prompt("Digite x"); }
    function b(x) { return X * x; }
    function c(y) { alert(y); }
    function d() { console.log("pronto"); }

    d(c(b(a())));
}

Nesse caso fica feio (pois a chamada é na ordem inversa), mas a sequência em que as operações são executadas é a mesma. Note que o código das funções continua bem organizado e lógico.

Agora, como seria se em vez de ler a entrada do usuário fizéssemos uma requisição via Ajax para obtê-la? E se no final, em vez de mostrar pro usuário fizéssemos uma segunda requisição para enviar ao servidor? Com promessas, tirando a questão do formato de dados o programa continua o mesmo!

function f() {
    function a() { return get('/le_valor/'); }
    function b(x) { return x * x; }
    function c(y) { return post('/resultado/', {valor:y}); }
    function d() { console.log("pronto"); }

    return a().then(b).then(c).then(d);
}

O fato de que o computador vai demorar um pouco entre a execução de cada uma dessas funções não importa - o fato é que elas serão executadas na mesma sequência lógica que você concebeu.

Na prática, é claro que você não vai colocar cada instrução numa função separada, ainda que em princípio isso seja possível (em Q pelo menos - já que ele mistura bem tanto funções síncronas quanto assíncronas). Em vez disso, tudo o que precisa fazer é enxergar em que pontos uma operação assíncrona vai acontecer, e garantir que sua função interna termine justamente nessa operação:

function f() {
    function a() { return get('/le_valor/'); }
    function b(x) { 
        var y = x * x;
        return post('/resultado/', {valor:y}); 
    }
    function d() { console.log("pronto"); }

    return a().then(b).then(d);
}

Notas:

  • Se uma função precisa do resultado de duas ou mais funções, basta misturar o exemplo que usa closures com o exemplo que retorna os valores. Exemplo:

    function f() {
        var x, y;
    
        function a() { return get('/le_valor/'); }
        function b(data) { 
            x = data;
            y = x * x;
            return post('/resultado/', {valor:y}); 
        }
        function d() { console.log("O quadrado de " + x + " é " + y); }
    
        return a().then(b).then(d);
    }
    

    Você poderia em vez disso usar um then aninhado, mas na minha opinião fica mais difícil de entender o código (como você já percebeu):

    function f() {
        function a() { return get('/le_valor/'); }
        function b(x) { 
            y = x * x;
            return post('/resultado/', {valor:y}).then(function() {
                console.log("O quadrado de " + x + " é " + y);
            }); 
        }
    
        return a().then(b);
    }
    
  • Se uma outra função qualquer precisa executar depois de f, não tem problema: como ela também retorna uma promessa, pode-se usá-la normalmente (desde é claro que no mesmo estilo):

    function g() {
        function a() { /* faz algo */ }
        function b() { /* faz algo - em seguida, tem que chamar f */ }
        function c() { /* faz algo - tem que ser executada depois de f */ }
        a().then(b).then(f).then(c);
    }
    

    ou:

    function g() {
        function a() { /* faz algo */ }
        function b() { 
            /* faz algo */ 
            return f();
        }
        function c() { /* faz algo - tem que ser executada depois de f */ }
        a().then(b).then(c);
    }
    

    Esse segundo estilo é o ideal se b precisa passar parâmetros para f. b precisa ser síncrona, entretanto. Caso contrário, pode-se usar a estratégia dos closures como na nota anterior.

  • Em linguagens que suportam o conceito de continuations, esse tipo de estruturação do programa não seria necessário - poderia-se ter uma função normal, em que uma chamada assíncrona no meio dela parasse tudo o que o computador estava fazendo, salvasse a pilha de execução e todos os seus dados, e quando a chamada completasse continuasse a execução como se a interrupção nunca tivesse acontecido. Seria o equivalente a uma chamada blocante (blocking call), mas que poderia ser executada em um único thread.

    Há quem tenha interesse de programar dessa forma em JavaScript, mesmo sem o suporte da linguagem (exemplo). Mas no fim das contas, acaba ficando uma estruturação feia, não muito diferente das chamadas com callback. O uso de promessas é, na minha opinião, um meio mais elegante de se resolver o problema da assincronicidade.

  • Esse artigo (em inglês) dá mais exemplos do uso prático do Q. Queria cobrir mais dele aqui, mas a resposta já está por demais extensa... Vou parando por aqui, espero que tenha esclarecido um pouco o raciocínio por trás do uso de promessas, e mostrado que não é tão difícil quanto parece à primeira vista.

3
  • Wow! Até eu que não me dou muito bem com JS entendi :o Commented 24/05/2014 às 2:01
  • Muito bom o passo-a-passo, muito didático. Commented 21/11/2014 às 2:20
  • 1
    5 dias procurando uma explicação deste tipo. O SO deveria ter um botão pra fazer "Donations" pra quem provê respostas como essas. Parabéns e obrigado!
    – Ewerton
    Commented 2/11/2016 às 23:15
12

Voce pode pensar a promessa como uma implementação do Design Pattern Remote Proxy.

Uma promessa é um método de resolução de um valor (ou não) de forma assíncrona de forma natural. Promessas são objetos que representam o valor de retorno que uma função pode, eventualmente, fornecer.

Promessas podem também ser objetos representando uma exceção lançada.

Promessas são extremamente úteis para lidar com objetos remotos onde podemos considerá-los como copias locais (num proxy) para o nossos objetos remotos (Remote Proxy Pattern).

Tradicionalmente, O JavaScript usa Closure, ou Callbacks para responder com dados significativos que não estão disponíveis de forma síncrona, como por exemplo solicitações AJAX - XHR após uma página ter sido carregada.

Usado Promessa em vez de depender de um Callback podemos interagir com os dados como se ele já tivesse voltado do servidor, ou seja é exatamente o caso onde temos um Proxy para o objeto.

Callbacks tem sido usado a muito tempo, mas os desenvolvedores sofrem quando usam este mecanismo. Callbacks NÃO fornecem consistência e a sua chamada não é garantida. Além disso eles "roubam" o fluxo de execução do código quando dependendo de outras Callbacks. Eles geralmente deixam o DEBUG incrivelmente difícil.

Em vez de disparar uma função e "rezar" para obter uma execução de callback durante a execução de métodos assíncronos, as promessas oferecem uma abstração diferente e muito mais simples: Eles retornam um objeto promessa.

Vejamos um exemplo: Um usuário deseja enviar mensagem para um amigo. Podemos escrever as Promessas assim:

User.get(fromId)
  .then(function (user) {
    return  user.friends.find(toId);
  }, function (err) {
    // Não encontramos o usuário
  })
  .then(function (friend) {
    return  user.sendMessage(friend, message);
  }, function (err) {
    // Não consegui enviar a mensagem
  })
  .then(function (success) {
    // Mensagem enviada
   }, function (err) {
     // Ocorreu um erro inesperado
   });

Este código é muito mais legível que um correspondente usando callbacks e podemos garantir que o retorno resolverá para um único valor, em vez de ter que lidar com interfaces de callback.

O tratamento de erro também é muito mais natural com Promessas, pois manipulamos o sucesso e o erro de uma maneira análoga.

É isso, espero ter esclarecido.

1
  • 1
    Achei muito boa a comparação e a citação das vantagens sobre as callback's. Commented 21/11/2014 às 2:24

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 .