A Look at ES6 Promises

In this talk I take a look at ES6 promises, covering the API, a few examples, tips, gotchas, testing techniques, and more. Corresponding content can be found at https://github.com/jimf/es6-promises-talk.

This talk was given to the Bucks County JS meetup on Jan 6, 2016.

Transcript

1. A look at ES6 Promises @fitzpatrick_j
2. github.com/jimf @fitzpatrick_j
3. github.com/jimf/es6-promises-talk @fitzpatrick_j
4. A promise represents the eventual result of an asynchronous operation.
5. Promise API
6. Creating a new promise // Create a pending promise instance new Promise(function(resolve, reject) { // Perform an async operation });
7. Creating a new promise // Create a pending promise instance new Promise(function(resolve, reject) { // On success, resolve with result resolve(resultData); });
8. Creating a new promise // Create a pending promise instance new Promise(function(resolve, reject) { // On failure, reject with error reject(resultError); });
9. Promise shorthands: new Promise(function(resolve, reject) { resolve(value); }); new Promise(function(resolve, reject) { reject(value); });
10. Promise shorthands: Promise.resolve(value); Promise.reject(value);
11. Methods: then p.then(function onFulfilled(value) { // Fulfillment }, function onRejected(reason) { // Rejection });
12. Methods: catch p.catch(function onRejected(reason) { // Rejection });
13. Chaining promise .then(doSomething) .then(doSomethingElse) .then(updateState) .catch(onError);
14. Promise.race var p1 = new Promise(function(resolve, reject) { setTimeout(resolve, 500, 'one'); }); var p2 = new Promise(function(resolve, reject) { setTimeout(resolve, 100, 'two'); }); Promise.race([p1, p2]).then(function(value) { console.log(value); // "two" // Both resolve, but p2 is faster });
15. Examples
16. #1. Coerce jqXHR ($.Deferred) to a Promise new Promise(function(resolve, reject) { $.ajax({ url: 'https://randomuser.me/api/', dataType: 'json', success: resolve, error: reject }); });
17. #2. Wrap setTimeout function wait(delay) { return function(val) { return new Promise(function(resolve) { setTimeout(resolve, delay, val); }); }; }
18. Tips
19. /** * Retrieve account data (if logged in) * * @return {undefined} */ fetchAccountData() { if (!this.session.isLoggedIn()) { return; } this.models.account.fetch(); }
20. #1. Always return the promise /** * Retrieve account data (if logged in) * * @return {undefined|Promise} */ fetchAccountData() { if (!this.session.isLoggedIn()) { return; } return this.models.account.fetch(); }
21. #2. Always be “thenable” /** * Retrieve account data (if logged in) * * @return {Promise} */ fetchAccountData() { if (!this.session.isLoggedIn()) { return Promise.reject(new Error('not logged in')); } return this.models.account.fetch(); }
22. #3. Keep model-ish methods composable /** * Retrieve account data (if logged in) * * @return {Promise} */ fetchAccountData() { if (!this.session.isLoggedIn()) { return Promise.reject(new Error('not logged in')); } return this.models.account.fetch(); } Not chained
23. Gotchas
24. #1. Errors are swallowed promise.then(function(result) { throw new Error('oops'); });
25. #2. Promises cannot be canceled lookupAutocompleteResults(); // Before previous request finishes lookupAutocompleteResults();
26. #3. Every attached handler is async promise .then(doSomething) // nextTick .then(doSomethingElse) // nextTick .then(updateState) // nextTick .catch(onError); // nextTick
27. #4. Values will fall through Promise.resolve('foo') .then(Promise.resolve('bar')) .then(function(val) { console.log(val); // What is val? });
28. #5. then(f, g) is not quite catch(g) Promise.resolve('foo') .then( function(v) { throw new Error('oops'); }, function(e) { /* I won't catch your error :-( */ } ); Promise.resolve('foo') .then(function(val) { throw new Error('oops'); }) .catch(function(e) { /* I will catch your error! :-D */ });
29. #6. Adding library “promise support” is… tricky • Polyfill or leave to user? ◦ If polyfill, which implementation? ◦ How best to expose implementation?
30. Unit Testing
31. Environment Support
32. caniuse promises? ✓ Node.js (0.12+) ✓ Modern browsers ✗ IE (Edge only)
33. ES6-compatible Promise libraries • RSVP.js - superset of the ES6 API ◦ es6-promise - subset of RSVP.js, implements ES6 API only • native-promise-only - ES6 polyfill • lie - tiny Promises/A+ implementation • Q.Promise - ES6 API implementation • es6-shim - full ES6 shim, includes Promise • core-js - lots of polyfills, including Promise. Used by babel-polyfill • polyfill.io - Polyfill service
34. Thanks! @fitzpatrick_j