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


  1. 2.

    2 Who am I? Senior So/ware Engineer Hearst Autos h8p://

    h8ps:// @ratracegrad
  2. 4.

    4 Background “It all started with the callbacks” It was

    the best of Kmes. It was the worst of Kmes.
  3. 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.
  4. 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
  5. 8.

    8 Challenges with Callbacks •Easy to create callback hell •Error

    handling is easy to miss •Difficult to understand
  6. 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
  7. 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.
  8. 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
  9. 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
  10. 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
  11. 15.

    15 Chaining Promises A Promise is an Object. 

    Prototype has .then() and .catch() methods
 These methods return promises
 You can chain promises
  12. 17.

    17 Error Handling If a Promise fails then its reject()

    funcKon is called
 or the .catch()
  13. 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.
  14. 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.
  15. 23.


  16. 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.
  17. 27.

    27 CreaKng a Generator 1. Generator funcKon starts with funcKon*

    2. Generator funcKon creates an iterator which is
 executed with 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
  18. 29.


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