Download as PDF, PPTX
Uploaded byValeri Karpov
Introducing Async/Await
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.
More Related Content
![JavaScript Promises Simplified [Free Meetup]](https://cdn.slidesharecdn.com/ss_thumbnails/promises20241001-241001092110-ceaab0a2-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Introducing Async/Await
- 1.
- 2. About Me ● Leadfor 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:10Intro, 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 ● Errorhandling ● Readability
- 6. Async/Await Makes AsyncLogic Flat
- 7. Loops, If Statements,Try/Catch Work
- 8. Can Only AwaitWithin An Async Function TLDR; don’t use forEach() with async/await*
- 9. A Brief Overviewof 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 vsReturn Value The value you return from an async function is not the return value! Await unwraps the promise
- 13. Exercise 1: GatherBlog Post Comments ● Suppose you have an API with 2 endpoints: ○ /post?id=${id} ○ /posts
- 14. Exercise 1: GatherBlog 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: ErrorHandling ● 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 BecomeRejections ● Throwing rejects the returned promise
- 19. Rejected Value vsSync Error ● Rejected value like resolved value for errors
- 20. Await Throws, Notthe Function Call
- 21. Should You UseTry/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: RetryingFailed 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 ● Asyncfunctions 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! TheMastering Async/Await Ebook, June 14, 2018 asyncawait.net/wyncode