Why does the code not wait immediately after waiting? Shouldn't it be non-blocking?

Question

Hi guys, it's hard for me to understand how asynchronous and waiting for work is behind the scenes. I know that we have promises that make our non-blocking code using the "then" function, we can put all the work that we need to do after the promise is resolved. and the work that we want to do in parallel in order to promise, we simply write it outside of our function at that time. Consequently, the code becomes non-blocking. However, I do not understand how async await does non-blocking code.

 async function myAsyncFunction() { try { let data = await myAPICall('https://jsonplaceholder.typicode.com/posts/1'); // It will not run this line until it resolves await. let result = 2 + 2; return data; }catch (ex){ return ex; } } 

See the code above. I cannot move forward until the API call is resolved. If this makes my code lock code, how is it better than promises? Or something I missed about async and await ? Where can I put my code that is independent of the call waiting? so can it continue to work without waiting for execution to complete?

I am adding Promise code that I would like to replicate in the async wait example.

 function myPromiseAPI() { myAPICall('https://jsonplaceholder.typicode.com/posts/1') .then(function (data) { // data }); // runs parallel let result = 2 + 2; } 

Answer 1

As its name suggests, the await keyword will cause the function to “wait” for its promise to resolve before executing the next line. The whole point of await is to make the code wait for the operation to complete before continuing.

The difference between this and the blocking code is that the world outside the function can continue to execute while the function is waiting for the completion of asynchronous operations.

async and await are just syntactic sugar in addition to promises. They allow you to write code that is very similar to regular synchronous code, even if it uses promises undercover. If we translated your example into something that obviously worked with promises, it would look something like this:

 function myAsyncFunction() { return myAPICall('https://jsonplaceholder.typicode.com/posts/1') .then(function (data) { let result = 2 + 2; return data; }) .catch(function (ex) { return ex; }); } 

As we can see here, the string let result = 2 + 2; is inside the .then() handler, which means that it will not be executed until myAPICall() resolved. Same thing when you use await . await just abstracts .then() for you.

Keep in mind (and I think you're looking) that you do not need to use await immediately. If you wrote your function this way, you could immediately execute the string let result = 2 + 2; :

 function myAPICall() { // simulate 1 second wait time return new Promise(resolve => setTimeout(resolve, 1000)) .then(() => 'success'); } async function myAsyncFunction() { try { console.log('starting'); // just starting the API call and storing the promise for now. not waiting yet let dataP = myAPICall('https://jsonplaceholder.typicode.com/posts/1'); let result = 2 + 2; // Executes right away console.log(result); // wait now let data = await dataP; // Executes after one second console.log(data); return data; } catch (ex) { return ex; } } myAsyncFunction(); 

After some clarification, I see that you really wanted to learn how to avoid having to wait for two asynchronous operations one after another and instead execute them in parallel. Indeed, if you use one await after another, the second will not start executing until the first ends:

 function myAPICall() { // simulate 1 second wait time return new Promise(resolve => setTimeout(resolve, 1000)) .then(() => 'success'); } async function myAsyncFunction() { try { console.log('starting'); let data1 = await myAPICall('https://jsonplaceholder.typicode.com/posts/1'); // logs after one second console.log(data1); let data2 = await myAPICall('https://jsonplaceholder.typicode.com/posts/2'); // logs after one more second console.log(data1); } catch (ex) { return ex; } } myAsyncFunction(); 

To avoid this, you can run both asynchronous operations by doing them, not expecting them, assigning their promises to some variables. Then you can wait for both promises:

 function myAPICall() { // simulate 1 second wait time return new Promise(resolve => setTimeout(resolve, 1000)) .then(() => 'success'); } async function myAsyncFunction() { try { console.log('starting'); // both lines execute right away let dataP1 = myAPICall('https://jsonplaceholder.typicode.com/posts/1'); let dataP2 = myAPICall('https://jsonplaceholder.typicode.com/posts/2'); let data1 = await dataP1; let data2 = await dataP2; // logs after one second console.log(data1); console.log(data2); } catch (ex) { return ex; } } myAsyncFunction(); 

An alternative way to do this is to use Promise.all() with some decomposition of the array:

 function myAPICall() { // simulate 1 second wait time console.log('myAPICall called'); return new Promise(resolve => setTimeout(resolve, 1000)) .then(() => 'success'); } async function myAsyncFunction() { try { console.log('starting'); // both myAPICall invocations execute right away const [data1, data2] = await Promise.all([ myAPICall('https://jsonplaceholder.typicode.com/posts/1'), myAPICall('https://jsonplaceholder.typicode.com/posts/2'), ]); // logs after one second console.log(data1); console.log(data2); } catch (ex) { return ex; } } myAsyncFunction();