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
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 oawait
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.