(© ) https://www.twilio.com/blog/2015/10/asyncawait-the-hero-javascript-deserved.html With promises we write asynchronous code that synchronous code but with async/await we write asynchronous code that synchronous code. As a consequence this often leads to misconception. emulates looks like I decided to write this article because since the introduction of I have noted that a lot of developers have more difficulties understanding what is executed asynchronously and synchronously. These difficulties were already around with promises but async/await have emphasized it . async/await by coming closer to synchronous programming Let’s work with a simple example that writes a message before then after an asynchronous operation. We will implement it using async/await and a promise: delay = ( setTimeout(resolve, duration)) { .log(prefix + ) delay( ) .log(prefix + )
} { .log(prefix + ) delay( )
  .then( .log(prefix + ))
} const ( ) => duration new Promise => resolve async ( ) function asyncWithAwait prefix console ' before await' await 1000 console ' after await' ( ) function asyncWithPromise prefix console ' before promise' return 1000 => _ console ' after promise' Some developers tend to believe that the function written with async/await will always be executed synchronously because the code looks like if we wait synchronously for the delayed operation before continuing the execution. So let’s run it with this code and compare with the promise version: { prefix = .log(prefix + )
  asyncWithAwait(prefix) .log(prefix + )
  asyncWithPromise(prefix) .log(prefix + )
}

run() async ( ) function run let '(1)' console ' with await' console ' with promise' console ' after all' This is the output: ( ) ( ) before ( ) promise
( ) before promise
( ) after all
( ) after ( ) after promise 1 with await 1 await 1 with 1 1 1 await 1 As you can see the function code is run synchronously . Like with promises, . Let’s look at the more synchronous version: only until the first encountered await it is up to the caller to decide if the code will be executed synchronously or not { prefix = .log(prefix + ) asyncWithAwait(prefix) .log(prefix + )
  asyncWithPromise(prefix).then( .log(prefix + ))
}

run() async ( ) function run let '(2)' console ' with await' await console ' with promise' => _ console ' after all' And this is the output: ( ) ( ) before ( ) after ( ) promise
( ) before promise
( ) after promise
( ) after all 2 with await 2 await 2 await 2 with 2 2 2 If the caller does not make use of await(respectively then with promises) then your code will not run synchronously. That’s the reason why async/await for Each. does not work as expected with constructs like If you liked this article, hit the applause button below, share with your audience, follow me on Medium or read more for insights about: not using console.log anymore , the Feathers framework , the raise and next step of Artificial Intelligence, the evolution of Computer Science , the goodness of unlearning and why software development should help you in life ?

Too Long; Didn't Read

Making security fun one episode at a time

A common misconception about async/await in JavaScript

Too Long; Didn't Read

Luc Claustres

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

A common misconception about async/await in JavaScript

Too Long; Didn't Read

Luc Claustres

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES