Escape Callback Hell and Enter Callback Heaven with Async/Await

JavaScript relies heavily on callbacks for async functions which leads to the infamous 'callback hell'. ES7 is proposing the use of async/await to avoid this. Node.js has already implemented it in version 7.6. I will show you how you can escape from callback hell and reach callback heaven with async await.

Transcript

1. Escape Callback Hell and Enter
   Callback Heaven with Async/Await
   Jennifer Bland
   

   View Slide

2. Who Am I?
   www.jenniferbland.com
   @ratracegrad
   www.youtube.com/c/JenniferBland
   jennifer@jenniferbland.com
   github.com/jenniferbland
   

   View Slide

3. IN THE BEGINNING
   or how did we get here
   

   View Slide

4. The only thing that maters in software is the experience of the user
   Change How I/O Is Handled
   

   View Slide

5. Sample Code
   

   View Slide

6. CHANGE THE INFRASTRUCTURE
   non-blocking event loop
   

   View Slide

7. Node.js Design Goals
   No function should direct perform I/O
   To receive info from disk, network or other
   process, there must be a callback
   Stream everything; never force the buffering
   of data
   Have built-in support for important protocols
   

   View Slide

8. Progression of I/O Handling
   

   View Slide

9. Sample Code - no waiting
   

   View Slide

10. Sample Code - callback
    

    View Slide

11. Sample Code - callback hell
    

    View Slide

12. View Slide

13. Promises
    

    View Slide

14. Chaining Promises
    

    View Slide

15. z
    

    View Slide

16. Async Await
    Async - declares an asynchronous function
    Automatically transforms a regular function into a Promise
    When called async functions resolve with whatever is returned
    in their body
    Async functions enable the use of await
    

    View Slide

17. Async Await
    Await - pauses the execution of async functions
    When placed in front of a Promise call, await forces the rest of the
    code to wait until that Promise finishes and returns a result
    Await works only with Promises, it does not work with callbacks
    Await can only be used inside async functions
    

    View Slide

18. Async/Await Example
    

    View Slide

19. Async/Await Detailed Example
    

    View Slide

20. Async/Await Handling Errors
    

    View Slide

21. Async/Await Handling Errors
    

    View Slide

22. Async/Await Handling Errors
    

    View Slide

23. Async/Await Examples
    

    View Slide

24. Async/Await Examples
    

    View Slide

25. Async/Await Examples
    

    View Slide

26. Async/Await Examples
    

    View Slide

27. Browser Support
    

    View Slide

28. Who Am I?
    www.jenniferbland.com
    @ratracegrad
    www.youtube.com/c/JenniferBland
    jennifer@jenniferbland.com
    github.com/jenniferbland
    

    View Slide