Async Therefore Await

Async Therefore Await

This talk is an introduction to async/await in JavaScript, why it's better than Promises, how it works and how to use it today.

63328f785a094cd8ae71939b8f70773f?s=128

Mohamed Oun

March 15, 2018
Tweet

Transcript

  1. Async Therefore Await ..Or how to write async JavaScript without

    losing your sanity
  2. Who Am I? Mohamed Oun Software engineer by day.. And

    night. @Mohamed3on Mohamed3on@gmail.com Mohamed3on.online
  3. Why even write asynchronous code?

  4. 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
  5. Example in Python

  6. Same example in JavaScript

  7. That’s awesome, right?!

  8. 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
  9. How JavaScript handles asynchronous code 1. First, there were callbacks

  10. None
  11. How JavaScript handles asynchronous code 1. First, there were callbacks

    2. Then came Promises • .then() and .catch() • Easier to read and understand
  12. None
  13. Better, but still room for improvement

  14. Mandatory cats example

  15. Code example by @mpjme

  16. In comes our hero Async/Await

  17. Code example by @mpjme

  18. 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!
  19. Because async/await is essentially an abstraction over Promises: • An

    async function is a the same as a function which returns a promise
  20. 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
  21. Because async/await is essentially an abstraction over Promises: • You

    can use await Promise.all([]) to run multiple promises in parallel
  22. 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
  23. Ok, but how do you handle errors? There has to

    be a .catch()!
  24. You can use try/catch

  25. You can attach .catch(), just like Promises

  26. Support for async/await • Supported in Node 8+ • Supported

    in all major modern browsers
  27. 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
  28. That’s it, you made it to the end!

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