Async/Await x Sync

Question

I’m studying synchronous/asynchronous behaviors at the angle and I’m not sure when to use async and await....

Correct me if I’m wrong...

I understand that for me to call with await, the return has to be Promise and therefore I will be waiting for this promise of return to my async method.

But if I have to wait for the answer, why use async with await, and if I use the method without async I also expect an answer?

I know there’s a reason, but I can’t see it...

Answer 1

But if I have to wait for the answer, why use async with await, being that if I use the method without the async I also hope an answer?

I believe this is not your question but responding to the letter, to use the await it is necessary that it is within a function async.

Now what I think is your question with a slightly more complete answer: Javascript is a synchronous language but it provides us with some mechanics to have an asynchronous behavior. One of the ways is through the callbacks, where we pass a function as parameter of a method and it is executed at a given instant without "locking" the execution of its code and consequently without locking the interface.

As the code grows, we will have a lot of callbacks and it becomes a mess and then comes the term "callback Hell". With evolution came the Promise who helped organize these callbacks. Then came the async/await which is an extension of Promises to simplify its use.

So if I understand your doubt correctly, if you expect a response from a function already knowing that your return is a Promise, to use the await execution is required to be within an asynchronous function (decorated with async), otherwise you should use the then/catch to pick up the answer/error. If the function does not return a Promise its use will "lock" the execution of the rest of the code until it is finished. See the big difference between running a synchronous function vs a async/await is that the first locks the whole code while the second only locks inside the function to which it belongs not impacting on the execution of the rest of the code.

See the code below:

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
*/

I hope I have clarified your doubts, otherwise please provide more details so that others can help ;) abs

Answer 2

It doesn’t make much sense to compare synchronous and asyncronous methods since they have different purposes. think like this imagine that you want to make a cake if you already have all the igredientes Oce can just run the method to make Cake() and wait for your cake ready, this would be the synchronous case. Now imagine that you don’t have the igredientes and you ask your friend to go to the market to buy. If you run to do Shop() it will have the null igredientes and it will not work. If you wait for your friend to come back it will be inefficient because you don’t know how long it will take to come back, so if you use the await that basically means when he comes back with the igredientes (usually an http return in real life) then you can make the cake. I don’t know if it was the best metaphor but I hope you understand.