Async Therefore Await
..Or how to write async JavaScript without losing your sanity
Slide 2
Slide 2 text
Who Am I?
Mohamed Oun
Software engineer by day.. And night.
@Mohamed3on
Mohamed3on@gmail.com Mohamed3on.online
Slide 3
Slide 3 text
Why even write
asynchronous code?
Slide 4
Slide 4 text
Why even write asynchronous code?
• JavaScript is single threaded, with lots of processes
sharing the same thread
• DOM rendering, network requests, your client-side code
• They can’t all (and don’t have to) wait for each other
Slide 5
Slide 5 text
Example in Python
Slide 6
Slide 6 text
Same example in JavaScript
Slide 7
Slide 7 text
That’s awesome, right?!
Slide 8
Slide 8 text
But it’s not so rosy..
• Async code comes with added complexity
• It’s usually harder to read and reason about
• Easy to get into the infamous callback hell with more
complex code
Slide 9
Slide 9 text
How JavaScript handles
asynchronous code
1. First, there were callbacks
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
How JavaScript handles
asynchronous code
1. First, there were callbacks
2. Then came Promises
• .then() and .catch()
• Easier to read and understand
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
Better, but still room for
improvement
Slide 14
Slide 14 text
Mandatory cats example
Slide 15
Slide 15 text
Code example by @mpjme
Slide 16
Slide 16 text
In comes our hero
Async/Await
Slide 17
Slide 17 text
Code example by @mpjme
Slide 18
Slide 18 text
Async/Await is ‘syntactic sugar’ over
Promises
• Use the keyword async before your function declaration
• Await acts like .then() and pauses the execution until the
promise is fulfilled
• Looks like synchronous code, but waits in the
background, instead of hanging the main thread
• We get the performance benefits of asynchronous code
and the readability of synchronous code
• Best of both worlds!
Slide 19
Slide 19 text
Because async/await is essentially an
abstraction over Promises:
• An async function is a the same as a function which
returns a promise
Slide 20
Slide 20 text
Because async/await is essentially an
abstraction over Promises:
• An async function that throws an exception is equivalent
to a function that returns a rejected Promise
Slide 21
Slide 21 text
Because async/await is essentially an
abstraction over Promises:
• You can use await Promise.all([]) to run multiple
promises in parallel
Slide 22
Slide 22 text
Top-level await workaround
• Top-level (global scope)
await doesn’t work
• You can only await in an
async function
• But do I call the function I
just wrote?
• We can use IIFEs to get
around that
Slide 23
Slide 23 text
Ok, but how do you
handle errors?
There has to be a .catch()!
Slide 24
Slide 24 text
You can use try/catch
Slide 25
Slide 25 text
You can attach .catch(), just like
Promises
Slide 26
Slide 26 text
Support for async/await
• Supported in Node 8+
• Supported in all major modern browsers
Slide 27
Slide 27 text
What if I need to support IE? (Poor
you)
• You can use Babel, specifically babel-preset-env
• automatically compiles your code based on the browsers
you’re targeting
• You can configure it to only include the polyfills and
transforms needed for the browsers you support.
• Transpiling only what's needed to make your bundles
smaller
Slide 28
Slide 28 text
That’s it, you made it to the end!
Slide 29
Slide 29 text
Resources
• Await and Async Explained with Diagrams and Examples
• async / await in JavaScript - What, Why and How - Fun Fun
Function
• dotJS 2017 - Wes Bos - Async + Await