Asynchronous JS with Promise (+ Workshop)

Transcript

1. Asynchronous JS with Promise + Workshop 王浩宇 Makara Wang makara@wiredcraft.com 2013.03.30
2. Promise A concept http://wiki.commonjs.org/wiki/Promises/A An (eventual) value 3 states: unfulfilled, fulfilled, and failed
3. Implementations jQuery Dojo Q - https://github.com/kriskowal/q When.js - https://github.com/cujojs/when Deferred - https://github.com/medikoo/ deferred
4. Example with Deferred Load a Backbone.js model Perform some operations Error handling
5. function fetch(model) { var def = deferred(); model.fetch({ success: function(model) { def.resolve(model); }, error: function() { def.resolve(new Error('lorem')); } }); return def.promise; }
6. deferred(new Model({id: 1})) .then(fetch) .then(function(model) { // ... }) // Or .end() .then(function() { // ... }, function(err) { // ... });
7. Creating function lorem() { var def = deferred(); def.resolve(xxx); return def.promise; } var promise = lorem();
8. Creating var promise = deferred(xxx);
9. Chaining var promise = deferred(xxx); promise.then(function() { return 'a promise or a value or an error'; }).then(xxx);
10. var promiseA = deferred(valueA); var promiseB = promiseA.then(function(valueA) { return valueB; }); var promiseC = promiseB.then(function(valueB) { var def = deferred(); def.resolve(valueC); return def.promise; }); promiseC.then(function(valueC) {});
11. Compare with Async Async - https://github.com/caolan/async Think in data Examples: user login
12. async.waterfall([ function(callback) { // Load a user model. callback(null, user); }, function(user, callback) { // Call the login API. user.login({ success: function() { user.authenticated = true; callback(null, user); }, error: function() { callback(new Error('lorem')); } }); } ], function(err, user) {});
13. // Or simply name it `login` function getLoggedInUser(user) { var def = deferred(); // A method that calls the login API. user.login({ success: function(data) { var loginUser = new User(data); def.resolve(loginUser); }, error: function() { def.resolve(new Error('lorem')); } }); return def.promise; }
14. Work with Express.js app.get('/', function(req, res, next) { // This returns a promise. loadSomething(x).end(function(data) { res.send(y); // Or req.y = data; next(); }, next); });
15. Deferred https://github.com/medikoo/deferred http://www.medikoo.com/asynchronous- javascript
16. Thanks! Questions?
17. Workshop! https://github.com/devo-ps/practice