5

Pensei que havia entendido o funcionamento da função assíncrona com await. No meu entendimento o await aguardava o resolve da Promise para dar continuidade para à seguinte.

Para testar esse funcionamento, criei duas funções que retornam uma promessa e incluí um temporizador (simulando acesso a base de dados). Percebi que o código foi executado de forma assíncrona, ignorando o await.

function getSenha() {
    return new Promise(function(resolve, reject) {
                setTimeout( function() {
                    console.log( 'Executa uma vez após 9 segundos.' );
                  }, 9000 );                    
                resolve("RET_SENHA");
    });
};

function getMensagem() {
    return new Promise((resolve, reject) =>{
        setTimeout( function() {
            console.log( 'Executa uma vez após 1 segundo.' );
            }, 1000 );          
            resolve("RET_MSG");
    });
}


async function montaMensagem() {
    const senha = await getSenha();
    const msg = await getMensagem();

    console.log('Senha: ', senha);
    console.log('Mensagem: ', msg);
}
montaMensagem();

Segue o resultado:

Senha:  RET_SENHA
Mensagem:  RET_MSG
Executa uma vez após 1 segundo.
Executa uma vez após 9 segundos.

O correto não seria:

Executa uma vez após 9 segundos.
Executa uma vez após 1 segundo.
Senha:  RET_SENHA
Mensagem:  RET_MSG

Com a consulta no Banco:

getSenha() {
        return new Promise((resolve, reject)=> {
            let connection = AtendimentoDB.connect();
            let sql = "select * from senha";

            connection.query(sql, function (error, results, fields) {
                if (error) {
                    reject(error);
                } else {
                    resolve(results);
                }
            });
            connection.end();
        });
    };

getMensagem() {
        return new Promise((resolve, reject) =>{
            let connection = AtendimentoDB.connect();
            let sql = "SELECT mensagem FROM configuracao;";
            connection.query(sql, function (error, results, fields) {
                if (error) {
                    reject(error);
                } else {
                    resolve(results);
                }
            });
            connection.end();

        });
};

async function montaMensagem() {
    const senha = await getSenha();
    const msg = await getMensagem();

    console.log('Senha: ', senha);
    console.log('Mensagem: ', msg);
}
6
  • tente colocar o async na função getMensagem() e getSenha() 27/04/2019 às 3:28
  • @OtavioCapel, valeu pela dica, mas não funcionou. Pelo que entendi, somente a função que vai usar o await precisa ser async, estou certo?
    – Developer
    27/04/2019 às 3:30
  • 1
    Você não precisa colocar os resolve dentro do timeout? Ele de fato executa a function do timeout após determinado período, mas em quanto isso, ele continua executando o código (no caso o resolve) 27/04/2019 às 3:32
  • Fiz o teste aqui colocando o resolve dentro do timeout e de fato houve o resultado esperado, seria isso? 27/04/2019 às 3:33
  • 1
    O certo não seria colocar o "resolve("RET_SENHA")" dentro da function do timeout? 27/04/2019 às 3:35

1 Resposta 1

7

TL;DR: O problema não está na função assíncrona e/ou no await. Como mencionado pelo @Leonardo Buta nos comentários da pergunta, problema está na sua implementação dos exemplos getSenha e getMessage, já que o resolve() deveria ter sido chamado dentro do setTimeout.


Assumindo que tanto getSenha quanto getMessage fazem exatamente a mesma coisa, irei exemplificar o motivo da situação usando a primeira função apresentada:

function getSenha() {
  return new Promise(function(resolve, reject) {
    setTimeout( function() {
        console.log( 'Executa uma vez após 9 segundo.' );
    }, 9000 );                    
    resolve("RET_SENHA");
  });
};

Nela, podemos afirmar que o resolve() está fora do setTimeout, o que faz com que a promessa seja resolvida imediatamente após a sua chamada, fazendo com que somente o console.log aguarde os 9 segundos. Essa resolução imediata da Promise nos dá a impressão de que o await não funciona (já que a promessa é resolvida instantaneamente e não temos essa percepção). Na realidade, o await parou a execução da função por um número extremamente pequeno de tempo.


O exemplo mostra abaixo a diferença entre colocar o resolve dentro e fora do setTimeout:

function withinSetTimeout() {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log('Console.log: [1] (Dentro do setTimeout)')

      // Note que o `resolve` está dentro do `setTimeout`. Isso faz com que
      // a Promise só seja resolvida quando o tempo de espera (2s) acabar.
      resolve('[1] De dentro do setTimeout!')
    }, 2000)
  })
}

function outsideSetTimeout() {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log('Console.log: [2] (Dentro do setTimeout)')
    }, 2000)

    // Por estar fora do `setTimeout`, a Promise será resolvida
    // imediatamente (não haverá nenhum aguardo).
    resolve('[2] De fora do setTimeout!')
  })
}

async function ex1() {
  const result1 = await withinSetTimeout()
  console.log('[1] Resultado:', result1)
}

async function ex2() {
  const result2 = await outsideSetTimeout()
  console.log('[2] Resultado:', result2)
}

ex1()
ex2()


E para esclarecer: o await para a execução dentro da função assíncrona até que a Promise que ele esteja aguardando seja resolvida ou rejeitada. Essa afirmação pode ser confirmada através da documentação relativa ao await na MDN.

Veja a demonstração abaixo:

// A função abaixo cria uma função que pausa o código dentro de uma função
// assíncrona por um dado tempo.
function wait(ms) {
  return new Promise((resolve) => {
    setTimeout(resolve, ms)
  })
}

// Demonstração da pausa causada pelo `await`:
async function main() {
  console.log('[1] Serei executado imediatamente!')
  await wait(800)
  console.log('[2] Fui executado após 800ms após o primeiro!')
  await wait(900)
  console.log('[3] Fui executado 900ms após o segundo!')
  await wait(1000)
  console.log('[4] Fui executado 1s após o terceiro!')
}

main()


Respostas aos comentários

Em resposta aos comentários da pergunta:

Pelo que entendi, somente a função que vai usar o await precisa ser async, estou certo?

Sim! Somente a função que vai usar o await precisa ser marcada como assíncrona. Em outros casos, essa marcação será desnecessária, apesar de não ter nenhum impacto negativo no código.

Na situação real será uma consulta ao banco de dados, não teria como utilizar um timeout.

Nesse caso, o await irá aguardar a consulta ao banco de dados, esperando o tempo da consulta. Nesse tempo, a execução da função assíncrona será pausada. O setTimeout no seu exemplo foi essa demora da consulta, e portanto, o resolve deveria ter sido colocado dentro do setTimeout, representando o momento em que os dados serão resolvidos.

Se a consulta ao banco será aguardada, porque o mesmo não aconteceu com o timeout?

A consulta ao banco será aguardada por que a Promise só será resolvida quando a query devidamente realizada e devolver os dados, que serão resolvidos pela promessa. É como se fosse algo assim:

  1. Você chama o método db.query;
  2. Ele realiza a query no seu banco de dados;
  3. Assim que os dados são resolvidos, a promessa é resolvida.
  4. Em caso de erros, a promessa é rejeitada.

Você não fez essa simulação corretamente, porque como expliquei logo no começo da resposta, você teria que ter colocado o resolve() dentro do setTimeout (o que simularia o tempo de espera da query). Como você chamou o resolve fora do setTimeout, a promessa foi resolvida imediatamente.

7
  • Luiz, obrigado pela excelente resposta, mas ainda fiquei com uma duvida. Se a consulta ao banco será aguardada, porque o mesmo não aconteceu com o timeout? Podemos falar amanhã ?
    – Developer
    27/04/2019 às 4:48
  • Editei a pergunta. Veja se ficou mais claro. 27/04/2019 às 14:13
  • Luiz, vamos lá. A minha dúvida deve ser em relação a algo muito básico, estou iniciando. Entendi a sua colocação, mas a minha única dúvida é: tanto o timeout quanto a query são dois processos, porque a query interrompe o processamento e o timeout passada direto. Vou incluir um JSFiddle para detalhar a minha dúvida.
    – Developer
    27/04/2019 às 19:28
  • Luiz, no meu entendimento o fato de utilizar await na chamada da função, isso faria com que a função fosse executada de forma sincrona, ou seja, linha a linha aguardando a finalização de cada linha. No exemplo do setTimeout, achei que deveria aguardar os segundos, exibir a mensagem no console e só depois retornar o resolve. Por que não foi executado dessa maneira? Essa é a minha dúvida. Valeu pela força.
    – Developer
    27/04/2019 às 20:19
  • Vamos continuar esta discussão no chat. 27/04/2019 às 21:50

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 .