Practical JS promises

Asa Kusuma

github.com/asakusuma/promise-workshop

Async operations are 1st class citizens,

represented as objects

var loadContainer = showPage('#photo-view'); var loadController = Controller.load(id, authToken); !Promises.all([ loadContainer, loadController ]).then(Controller.pageDidLoad) .then(null, handleError); !loadController.then(null, handleError);

pageDidLoad: function(results) { var loadContainerResult = results[0]; var loadControllerResult = results[1]; }

load: function(id, authToken) { return DataStore.get(id, authToken) .then(_.bind(this.display, this)); }

Compose functions without introducing coupling to the

functions themselves

Promise handlers accept a single parameter

Functional Programming

• Input arguments

• Do operations

• Return result

• Avoid state

• Avoid mutation

• Avoid side-effects

The A+ Spec• 3 states: pending, fulfilled, rejected (settled*)

• .then(), which takes handler functions as params

• Can call multiple times; attach multiple handlers

• Handler called even if then() called after settled

• Once fulfilled or rejected, cannot change state

Settled

Pending

Fulfilled Rejected

onFulfilled() onRejected()

.then(onFulfill, onReject)

• onFulfill called when promise is fulfilled

• onReject called when promise is rejected

• Return val becomes promise returned by then()***

• Handler execution deferred to nextTick

fulfilledPromise .then(function(){ console.log(‘world!’); }); console.log(‘Hello, ’);

Promise lingo

• Handler parameter

• Fulfillment value

• Rejection reason

• Resolved == settled

Error handling• Error in onFulfill will reject returned promise

• Throwing rejects next promise in chain

• Non A+ features

• Long stack traces

• Global error listener

myPromise.then( handleSuccess, handleError );

myPromise.then( handleSuccess, handleError ).then(null, handleError);

How are promises created?

var myPromise = new Promise(function(f, r) { setTimeout(function() { f(‘Hello world’); }, 500); });

Closure Syntax

var d = RSVP.defer(); !

setTimeout(function() { d.resolve(‘Hello world’); }, 500); !

var myPromise = d.promise;

Deferred Syntax

var partialLoad = promises.defer(); … view.on(‘renderPartial’, function() { partialLoad.fulfill($el); }); … return partialLoad.promise;

view.on(‘renderPartial’, _.partial(partialLoad.fulfill, $el));

Deferreds are the read-write parent of

the read-only promise

Exercise Creating Promises

getMessage: function(callback) !

RSVP.defer() new RSVP.Promise(function(f, r) { … })

Async or sync? Promise don’t care

createContext() .then(fetchUser) .then(initializeRouters) .then(initializeBindings)

Use promises to wrap any potentially non-blocking code

Common uses of promises• Data retrieval

• Anything involving an external call

• Loading CSS

• Animation

• Template rendering

Promise vs Event vs Stream

• Promises are for operations executed once

• Events and streams are for repeated events

• Promises and streams are both object-based

High-order functions• Functions that input and/or output functions

• Examples

• _.partial(func, arg)

• _.bind(func, context)

• Very useful with promises

myPromise .then(generateSumPartial(5)) .then(output)

Using a high order function

function generateSumPartial(n) { return function(resolutionValue) { return n + resolutionValue; } }

The high order function

Exercise Advanced Chaining

Promise Libraries• Promise creation

• Promise inspection

• Utility functions

• Error handling

• Native vs. Library

Utility Functions• .all()/allSettled()

• .hash()

• .spread()

• .map()

• Static vs member functions

$.ajax() .then(onFulfill, onReject) .then(output, errorPage);

Where jQuery will $@#% you

Testing

• .then() handler always on nextTick

• Most tests assume synchronous

• sinon.stub(process, ‘nextTick’).yields();

• Use the it() callback done handler

it(‘should blah’, function(done) { testThis.then(function(result) { expect(result).to.be.ok(); done(); }).then(null, done); });

Questions?

akusuma@linkedin.com

github.com/asakusuma/promise-workshop