$30 off During Our Annual Pro Sale. View Details »

Promises and Generators in ES6

Promises and Generators in ES6

All JavaScript programmers know two things – Asynchronous programming using callbacks is a required skill and all functions run to completion. ES6 introduced Promises and Generators. Promises address the significant shortcomings of callbacks. Generators are functions that can pause itself in mid-execution and can be resumed either right away or at a later time. In this session I will discuss the impact of these two new features in ES6.

Jennifer Bland

February 22, 2017
Tweet

More Decks by Jennifer Bland

Other Decks in Technology

Transcript

  1. by Jennifer Bland
    ES6 Promises & Generators

    View Slide

  2. 2
    Who am I?
    Senior So/ware Engineer
    Hearst Autos
    h8p://www.jenniferbland.com
    h8ps://github.com/ratracegrad/
    [email protected]
    @ratracegrad

    View Slide

  3. 3
    Promises

    View Slide

  4. 4
    Background
    “It all started with the callbacks”
    It was the best of Kmes. It was the worst of Kmes.

    View Slide

  5. 5
    What is a callback?
    Callback is a way of telling your code to execute
    this code when this other piece of code completes.

    View Slide

  6. 6
    JavaScript & Asynch Code
    •JavaScript event loop is single threaded.
    •Asynch code immediate return
    •Code executes in another loop
    •When finish event loop returns callback

    View Slide

  7. 7
    Callback Example

    View Slide

  8. 8
    Challenges with Callbacks
    •Easy to create callback hell
    •Error handling is easy to miss
    •Difficult to understand

    View Slide

  9. 9
    Promises Background
    •Prior to ES6 we had Promise libraries like Bluebird & q
    •Promises are naKve in ES6
    •Based off the Promises/A+ open standard

    View Slide

  10. 10
    What is a Promise?
    A Promise represents the eventual result of some
    type of operaKon which may be available now, or
    in the future, or never.
    Provides same funcKonality as callbacks but are more
    powerful because they are composable.

    View Slide

  11. 11
    Lifecycle of a Promise?
    1. Promise object is created
    2. Code inside promise runs
    3. Promise resolves or rejects
    4. Promise emits change event

    View Slide

  12. 12
    Promises have states
    1. Pending - have not fulfilled or rejected the Promise
    2. Fulfilled - promise succeeded
    3. Rejected - promise failed
    4. Se8led - fulfilled or rejected

    View Slide

  13. 13
    CreaKng a Promise
    1. In ES6 a Promise is a constructor
    2. Inside Promise we supply what is called the

    executor which is run when Promise is instanKated
    3. Executor takes two arguments - resolve and reject
    4. Promise calls its resolve funcKon when it succeeds

    and reject funcKon otherwise

    View Slide

  14. 14
    Promise Example

    View Slide

  15. 15
    Chaining Promises
    A Promise is an Object. 

    Promise Prototype has .then() and .catch() methods

    These methods return promises

    You can chain promises

    View Slide

  16. 16
    Chaining Promise Example

    View Slide

  17. 17
    Error Handling
    If a Promise fails then its reject() funcKon is called

    or the .catch()

    View Slide

  18. 18
    Error Handling Example

    View Slide

  19. 19
    Promise.all
    1. Has an iterable as an argument
    2. Returns a promise that resolves when all the

    promises in the iterable argument have

    resolved, or rejects with the reason of the first

    promise that rejects.

    View Slide

  20. 20
    Promise.all Example

    View Slide

  21. 21
    Promise.race
    1. Has an iterable as an argument
    2. Returns a promise that resolves or rejects as

    soon as one of the promises in the iterable

    resolves or rejects.

    View Slide

  22. 22
    Promise.race Example

    View Slide

  23. 23

    View Slide

  24. 24
    Generators

    View Slide

  25. 25
    Background
    •FuncKons run to compleKon
    •FuncKons receive data once
    •FuncKons return data once

    View Slide

  26. 26
    What is a Generator?
    •A generator looks like a funcKon but behaves like

    an iterator.
    •It pauses it’s execuKon between calls.
    •It generates many values over Kme by returning 

    an object which can be iterated over.

    View Slide

  27. 27
    CreaKng a Generator
    1. Generator funcKon starts with funcKon*
    2. Generator funcKon creates an iterator which is

    executed with iterator.next() method is called
    3. Inside a Generator funcKon, have yield keyword

    which suspends execuKon of Generator
    4. Generator can yield any number of Kmes by 

    calling the next() method
    5. The done properly indicates whether or not the

    Generator has yielded its last value

    View Slide

  28. 28
    Generator Example

    View Slide

  29. 29

    View Slide

  30. 30
    Tweet
    •Please tweet about presentaKon
    •Use #devnexus and #wwcatl

    View Slide

  31. 31
    We Are Hiring!
    •More than 12 MM unique visitors per month
    •More than 100MM pages viewed per month
    •More than 2MM followers on Facebook
    Tech Stack is Node, Express, Angular 2, Docker
    Benefits of working for a startup but financed
    by one of the largest media publishing
    companies in the world.

    View Slide

  32. 32
    h8ps://goo.gl/mdlkkP

    View Slide

  33. 33
    h8ps://goo.gl/mdlkkP
    h8p://www.jenniferbland.com
    h8ps://github.com/ratracegrad/
    [email protected]
    @ratracegrad

    View Slide