Introducing Async/Await
1 like1,544 views
Valeri Karpov will lead a workshop on async/await that includes two exercises. The schedule includes introductions to key concepts like return values, error handling, and loops/conditionals with async functions. Attendees will practice gathering blog post comments and retrying failed requests. Key takeaways are that async functions return promises, return resolves them while throw rejects them, and await pauses execution until a promise settles.
Introducing Async/Await
- 2. About Me ● Lead for Mongoose, Node+MongoDB ODM ● Author, Mastering Async/Await (ebook) ● Blogger, thecodebarbarian.com ● Invented the term “MEAN stack” ● 3rd async/await workshop: SF, Zagreb
- 3. Workshop Schedule ● 3:00-3:10 Intro, Return Values ● 3:10-3:40 Exercise 1 ● 3:40-3:50 Error Handling ● 3:50-4:20 Exercise 2 ● 4:20-4:25 Wrap-up and Takeaways
- 4. What Is Async/Await? ● 2 new keywords ● Async: special function that returns a promise ● Await: pauses execution of an async function
- 5. Callback Hell ● Error handling ● Readability
- 6. Async/Await Makes Async Logic Flat
- 7. Loops, If Statements, Try/Catch Work
- 8. Can Only Await Within An Async Function TLDR; don’t use forEach() with async/await*
- 9. A Brief Overview of Promises ● Promise = state machine ● Represents async op ● Can fulfill with a value ● Or reject with an error ● await only handles promises
- 10. Await and Assignment ● Promise fulfilled value
- 11. Composing Async Functions ● Async functions return a promise ● Referred to as the returned promise
- 12. Resolved Value vs Return Value The value you return from an async function is not the return value! Await unwraps the promise
- 13. Exercise 1: Gather Blog Post Comments ● Suppose you have an API with 2 endpoints: ○ /post?id=${id} ○ /posts
- 14. Exercise 1: Gather Blog Post Comments ● fetch() a list of blog posts ● fetch() the content of each blog post ● Find the id of the first post whose content contains “async/await hell” ● http://bit.ly/async-await-exercise-1
- 15. Part 2: Error Handling ● await on a fulfilled promise returns the value ● await on a rejected promise throws an error
- 16. Consolidated Error Handling ● 3 different patterns to handle all CB errors
- 17. Consolidated Error Handling ● Async function try/catch handles sync errors
- 18. Unhandled Errors Become Rejections ● Throwing rejects the returned promise
- 19. Rejected Value vs Sync Error ● Rejected value like resolved value for errors
- 20. Await Throws, Not the Function Call
- 21. Should You Use Try/Catch? ● catch() works too, often a better choice
- 22. Try/Catch vs. catch() ● Try/catch for specific, catch() for general ● Don’t use try/catch to wrap the entire function
- 23. Exercise 2: Retrying Failed Requests ● Exercise 1 assumed the API was reliable ● What about if every 2nd request fails? ● Need to wrap fetch() to retry 3 times ● http://bit.ly/async-await-exercise-2
- 24. Key Takeaways ● Async functions always return a promise ● return resolves the returned promise ● throw rejects the returned promise ● await pauses execution until promise settles ● await p returns the value p is fulfilled with
- 25. Further Reading ● http://bit.ly/node-promises-from-scratch ● http://bit.ly/async-await-design-patterns ● http://bit.ly/node-async-await ● The 80/20 Guide to ES2015 Generators
- 26. Thanks for Attending! The Mastering Async/Await Ebook, June 14, 2018 asyncawait.net/wyncode