2

Estou estudando comportamentos sincronos/assincronos no angular e não estou sabendo quando usar o async e await....

Me corrijam se eu estiver errado...

Entendo que pra eu chamar com await, o retorno tem que ser promise e portanto eu estarei esperando essa promessa de retorno para meu metodo async.

Mas, se eu tenho que esperar a resposta, porque utilizar async com await, sendo que se eu utilizar o metodo sem o async eu tambem espero uma resposta?

Sei que tem um porque, mas eu nao estou conseguindo visualiza-lo...

13
  • 1
    De uma forma muito bem resumida: com o await você aguarda a resposta, mas libera o processador para executar outras funções enquanto isso e volta a executar aquele código quando possuir a resposta. Sem o await você obriga o processador a esperar contigo, mesmo que ele não tenha o que fazer esperando. Esse é o princípio das corotinas, se quiser pesquisar mais.
    – Woss
    1/10/2019 às 13:22
  • @AndersonCarlosWoss, isso eu até q entendo, mas a minha pergunta é sobre usar o async e await e nao um metodo sincrono, o pq q eu usaria async com await sendo q se eu so utlizar o sync eu teria o mesmo resultado (?!?!) (eu nao sei, estou tentando entender isso) 1/10/2019 às 13:48
  • Vide primeiro comentário.
    – Woss
    1/10/2019 às 13:49
  • pq se eu tiver q usar o await pra obrigar uma resposta, pq simplesmente nao uso o sync direto? (no caso, quando falo sync seria o metodo/funcao sem o async no começo) 1/10/2019 às 13:49

2 Respostas 2

2

Mas, se eu tenho que esperar a resposta, porque utilizar async com await, sendo que se eu utilizar o metodo sem o async eu tambem espero uma resposta?

Acredito que esta não seja sua dúvida mas respondendo ao pé da letra, para utilizar o await é necessário que o mesmo esteja dentro de uma função async.

Agora o que acho que é sua dúvida com uma resposta um pouco mais completa: JavaScript é uma linguagem síncrona mas nos provê alguns mecânismos para ter um comportamento assíncrono. Uma das formas é através dos callbacks, onde passamos uma função como parâmetro de um método e a mesma é executada em um dado instante sem "travar" a execução do seu código e consequentemente sem travar a interface.

Conforme o código cresce, vamos ter um monte de callbacks e isto vira uma bagunça e daí vêm o termo "callback hell". Com a evolução surgiu a Promise que ajudou a organizar esses callbacks. Depois surgiu o async/await que é uma extensão das Promises para simplificar sua utilização.

Então, se entendi bem sua dúvida, se você espera uma resposta de uma função já sabendo que seu retorno é uma Promise, para utilizar o await é necessário que a execução esteja dentro de uma função assíncrona (decorada com async), caso contrário você deverá utilizar o then/catch para pegar a resposta/erro. Se a função não retornar uma Promise sua utilização irá "travar" a execução do restante do código até que a mesma seja finalizada. Veja que a grande diferença entre a execução de uma função síncrona vs uma async/await é que a primeira trava todo o código enquanto a segunda só trava dentro da função a qual ela pertence não impactando na execução do restante do código.

Veja o código abaixo:

function retornaPromise() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log('DentroPromise');
            resolve('PromiseFinalizada');
        }, 2000);
    });
}

// Com o async
async function minhaFuncaoAsync() {
    // Aqui o código espera a Promise antes de prosseguir com o restante do código DESTA função.
    // Isso porque estamos usando o await logo na primeira linha.
    // A diferença entre este caso e uma execução síncrona, é que 
    // a síncrona travaria a execução das outras funções até a sua resolução
    console.log(await retornaPromise());
    console.log('Fim-minhaFuncaoAsync');
}

// Com o async
async function minhaFuncaoAsync2() {
    const asyncFunc = retornaPromise();
    console.log('Fim-minhaFuncaoAsync2');
    console.log(await asyncFunc);
}

// Sem o async
function minhaFuncao() {
    // O conteúdo dentro do then será executado
    // quando a Promise for resolvida mas o restante de código
    // desta função será executado independente da Promise
    retornaPromise().then(a => console.log(a));
    console.log('Fim-minhaFuncao');
}

// Veja que uma função não interfere na execução da outra
minhaFuncaoAsync();

// Se aqui neste trecho houvesse um processamento síncrono, o código ficaria travado aqui até o término de sua execução.

minhaFuncaoAsync2();
minhaFuncao();

/*
 Resultado console:

 Fim-minhaFuncaoAsync2
 Fim-minhaFuncao

 (2s depois)

 DentroPromise
 PromiseFinalizada
 Fim-minhaFuncaoAsync
 DentroPromise
 PromiseFinalizada
 DentroPromise
 PromiseFinalizada
*/

Espero ter esclarecido suas dúvidas, caso contrário informe mais detalhes para que outros possam ajudar ;) abs

2
  • Acabou que nos comentarios da minha pergunta o foco foi para o async/await quando na verdade era ambos vs sync... De qualquer modo, tanto voce quanto o Anderson me falaram uma coisa que nao sabia quer é exatamente o que tentei resumir em meu ultimo comentario na minha pergunta... Mas sua resposta sanou as duvidas que eu tinha e agradeço a ajuda :) 1/10/2019 às 18:24
  • vlw @LeoHenrique qqr coisa é só falar ;) 1/10/2019 às 18:29
1

Não faz muito sentido comparar metodos sincronos e asincronos já que eles tem propositos diferentes. pensa assim imagina que vc quer fazer um bolo se vc já tem todos os igredientes voce pode simplesmente rodar o metódo fazerBolo() e esperar seu bolo pronto, esse seria o caso síncrono. Agora imagina que vc não tem os igredientes e vc pede pro seu amigo ir no mercado comprar. se vc rodar fazerBolo() ele vai ter os igredientes null e não vai dar certo. Se vc ficar esperando seu amigo voltar sera meio ineficiente pois vc não sabe quanto tempo ele vai demorar para voltar, por isso se usa o await que basicamente significa quando ele voltar com os igredientes(normalmente um retorno http na vida real) ai sim vc pode fazer o bolo. Não sei se foi a melhor metáfora mas espero que entenda.

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