Covers a few very core ideas about promises in JS: 1. What they are 2. How to use the then() method to access value or rejection reason 3. Promise chaining 4. Passing values through promise chains 5. Promise callbacks returning promises are waited for

1. Promises
Luke Smith
SmugMug
@ls_n

2. A promise represents a value
that may not be available yet
var promise = async();
promise

3. A promise represents a value
that may not be available yet
var promise = async();
promise
Synchronous code analogy
var value = sync();

4. new Y.Promise(workFn)
function async() {
function getMessage(resolve, reject) {
setTimeout(function () {
resolve(“Promise fulfilled”);
}, 1000);
}
return new Y.Promise(getMessage); promise
}

5. then() method to get value when available
or catch errors during value computation
var promise = async();
promise.then(onFulfilled, onRejected);
promise .then(
onFulfilled(value)
onRejected(reason)
)

6. then() method to get value when available
or catch errors during value computation
Synchronous code analogy
var value, error;
try {
value = sync(); promise .then(
} catch (reason) { onFulfilled(value)
error = reason;
onRejected(reason)
}
)
if (error) {
onRejected(reason);
} else {
onFulfilled(value);
}

7. Promise Resolution
Fulfillment Rejection
promise .then( promise .then(
value onFulfilled( value ) reason onFulfilled(value)
onRejected(reason) onRejected( reason )
) )
fulfill reject

8. then() returns a promise
var promiseA = async();
var promiseB = promiseA.then(onFulfilled, onRejected);
promiseA .then(
onFulfilled(value)
onRejected(reason)
)
promiseB

9. then() returns a promise
Synchronous code analogy
var valueA, valueB, error;
try {
valueA = sync(); promiseA .then(
} catch (reason) { onFulfilled(value)
error = reason;
onRejected(reason)
}
)
if (error) {
onRejected(reason); promiseB
} else {
valueB = onFulfilled(valueA);
}

10. callback return values fulfill their promises
return return
.then( .then(
onFulfilled(value) value onRejected(reason) value
) )
promise promise
value fulfill value fulfill

11. callback errors reject their promises
throw throw
.then( .then(
onFulfilled(value) error onRejected(reason) error
) )
promise promise
reason reject reason reject

12. Promise Chaining
var promiseC = async()
.then(onFulfilledA, onRejectedA)
.then(onFulfilledB, onRejectedB);
promiseA .then(
onFulfilledA(value)
onRejectedA(reason)
)
promiseB .then(
onFulfilledB(value)
onRejectedB(reason)
)
promiseC and so on...

13. callback resolution through the chain
promise1 .then( return
value A onFulfilled(value) A
value value B
onRejected(reason)
)
fulfill fulfill
promise2
value B
.then( return
onFulfilled(value) B
value value C
onRejected(reason)
)
fulfill
promise3
value C

14. Synchronous code analogy
var valueA, valueB, valueC,
error = false;
try {
valueA = sync();
} catch (reasonA) {
error = true;
valueA = reasonA;
}
if (error) {
try {
valueB = onRejectedA(valueA);
error = false;
} catch (reasonB) {
valueB = reasonB;
}
} else {
try {
valueB = onFulfilledA(valueA);
} catch (reasonB) {
error = true;
valueB = reasonB;
}
}

15. Synchronous code analogy
var valueA, valueB, valueC,
error = false;
try {
valueA = sync();
} catch (reasonA) {
error = true;
initial promise generation
valueA = reasonA;
}
if (error) {
try {
valueB = onRejectedA(valueA);
error = false;
} catch (reasonB) {
valueB = reasonB;
}
} else {
try {
valueB = onFulfilledA(valueA);
} catch (reasonB) {
error = true;
valueB = reasonB;
}
}

16. } catch (reasonA) {
error = true;
valueA = reasonA;
}
Synchronous code analogy
if (error) {
try {
valueB = onRejectedA(valueA);
error = false;
} catch (reasonB) {
valueB = reasonB;
}
} else { for each intermediate promise...
try {
valueB = onFulfilledA(valueA);
} catch (reasonB) {
error = true;
valueB = reasonB;
}
}
if (error) {
valueC = onRejectedB(valueB);
} else { final promise callbacks
valueC = onFulfilledB(valueB);
}

17. value/reason pass thru if callback missing
promise1 .then(
return value B
value A onFulfilled(value) A
value
onRejected(reason)
)
fulfill
promise2 .then(
pass thru
value B null
onRejected(reason)
)
promise3 .then(
value B onFulfilled(value) B
value
onRejected(reason)
)

18. callbacks can return promises
.then( return returned
onFulfilled(value)
promise
)
promise
.then( return returned
onRejected(reason)
promise
)
promise

19. callbacks can return promises
.then( return returned
onFulfilled(value) Not a value (yet)
promise
)
promise
.then( return returned
onRejected(reason) Not a value (yet)
promise
)
promise

20. returned promises postpone continuation
.then( return
onFulfilled(value) returned
promise
)
promise
.then(
onFulfilled(value)
onRejected(reason)
)

21. returned promises postpone continuation
.then( inserted
onFulfilled(value) returned .then(
promise onFulfilled(value)
)
onRejected(reason)
promise )
“wait for me”
.then(
onFulfilled(value)
onRejected(reason)
)

22. returned promises postpone continuation
.then( inserted
onFulfilled(value) returned .then(
promise onFulfilled(value)
)
value onRejected(reason)
promise )
fulfill
“wait for me”
.then(
onFulfilled(value)
onRejected(reason)
)

23. returned promises postpone continuation
.then(
onFulfilled(value) returned .then(
promise onFulfilled( value )
)
value onRejected(reason)
promise )
fulfill
.then(
onFulfilled(value)
onRejected(reason)
)

24. returned promises postpone continuation
.then(
onFulfilled(value) returned .then(
promise onFulfilled( value )
)
value onRejected(reason)
promise )
value fulfill
.
omise..
i nal pr
e s orig
e resolv
en t valu
.then( f ulfillm
onFulfilled(value)
onRejected(reason)
)

25. returned promises postpone continuation
.then(
onFulfilled(value) returned .then(
promise onFulfilled( value )
)
value onRejected(reason)
promise )
value fulfill
.
omise..
i nal pr
e s orig
e resolv
...then chain continues en t valu
.then( f ulfillm
onFulfilled( value )
onRejected(reason)
)

26. Promises/A+ spec
http://promises-aplus.github.com/promises-spec/
https://github.com/promises-aplus/promises-spec