JavaScript Promise
45 likes4,384 views
This document discusses JavaScript promises as an abstraction pattern for handling asynchronous code. It explains why promises are useful by describing some of the issues with callback-based asynchronous code, such as callback hell and lack of readability. The document then provides examples of how to create and use promises to handle sequential and parallel asynchronous tasks in a more maintainable way using chaining and batching. It also discusses how promises are supported in browsers, Node.js, and common promise libraries like Q, RSVP, when.js, and Bluebird.
![Asynchronous Code
Everywhere in JavaScript
setTimeout(function () {!
// do something !
}, 1000);
require(['lodash', 'jquery'], !
function (_, $) {!
// do something with lodash and jQuery!
}!
);
$('form').on('submit', function (e) {!
// do something when user submit form!
});!
!
$('img').on('load', function (e) {!
// do something when img loaded!
});!
!
$('img').on('error', function (e) {!
// do something when img fails loading!
});
$.ajax('/terms.json', function () {!
// do something after api data !
// being loaded!
})
Delay
RequireJS
AJAX
DOM Events
fs.readFile('foo.txt', function () {!
// do something after foo.txt !
// being loaded!
})
Node.js](https://image.slidesharecdn.com/josephj-promise-javascript-stackla-150604134255-lva1-app6892/85/JavaScript-Promise-4-320.jpg)
![Asynchronous Code
Everywhere is Callback
setTimeout(function () {!
// do something !
}, 1000);
require(['lodash', 'jquery'], !
function (_, $) {!
// do something with lodash and jQuery!
}!
);
$('form').on('submit', function () {!
// do something when user submit form!
});!
!
$('img').on('load', function () {!
// do something when img loaded!
});!
!
$('img').on('error', function () {!
// do something when img fails loading!
});
$.ajax('/terms.json', function () {!
// do something after api data !
// being loaded!
})
Delay
RequireJS
AJAX
DOM Events
fs.readFile('foo.txt', function () {!
// do something after foo.txt !
// being loaded!
})
Node.js](https://image.slidesharecdn.com/josephj-promise-javascript-stackla-150604134255-lva1-app6892/85/JavaScript-Promise-5-320.jpg)
![Asynchronous Code
Everywhere is Callback
setTimeout(function () {!
// do something !
}, 1000);
require(['lodash', 'jquery'], !
function (_, $) {!
// do something with lodash and jQuery!
}!
);
$('form').on('submit', function () {!
// do something when user submit form!
});!
!
$('img').on('load', function () {!
// do something when img loaded!
});!
!
$('img').on('error', function () {!
// do something when img fails loading!
});
$.ajax('/terms.json', function () {!
// do something after api data !
// being loaded!
})
Delay
RequireJS
AJAX
DOM Events
fs.readFile('foo.txt', function () {!
// do something after foo.txt !
// being loaded!
})
Node.js
Nothing wrong with Callback
Use it when your scenario is simple](https://image.slidesharecdn.com/josephj-promise-javascript-stackla-150604134255-lva1-app6892/85/JavaScript-Promise-6-320.jpg)
![function GitHubber(name) {!
this.name = name;!
this.token = null;!
this.id = null;!
this.repos = [];!
this.steps = ['_authorise', '_getUserInfo', '_getUserRepos'];!
}!
!
var proto = {!
_authorise: function () {!
var url = '/api/authorise';!
makeRequest(url, function (data, success) {!
this.token = data.token;!
this.emit('success', [‘_authorise']);!
});!
},!
_getUserInfo: function () {!
var url = '/api/getUserInfo/' + this.name +
'?token=' + data.token;!
makeRequest(url, function (data, success) {!
this.id = data.id;!
this.emit('success', [‘_getUserInfo']);!
});!
},!
_getUserRepos: function () {!
var url = '/api/getRepos/?uid=' + this.id + !
'?token=' + data.token;!
makeRequest(url, function (data, success) {!
this.repos = data.repos;!
this.emit('success', [‘_getUserRepos', this.repos]);!
});!
},!
getUserRepos: function (callback) {!
var that = this;!
that.on('success', function (e, method) {!
var offset = that.steps.indexOf(method);!
if (offset !== that.steps.length - 1) { // Other steps!
that[that.steps[offset + 1]];!
} else { // _getUserRepos!
callback(that.repos); !
}!
});!
that[that.steps[0]]();!
}!
};
My Solution
Before understanding Promise
• Break callbacks into
methods with semantic
naming
• Exchange data with
instance variables
• Make use of custom events
I am a big fan of Custom Events
Wolfy87/EventEmitter](https://image.slidesharecdn.com/josephj-promise-javascript-stackla-150604134255-lva1-app6892/85/JavaScript-Promise-8-320.jpg)
![function GitHubber(name) {!
this.name = name;!
this.token = null;!
this.id = null;!
this.repos = [];!
this.steps = ['_authorise', '_getUserInfo', '_getUserRepos'];!
}!
!
var proto = {!
_authorise: function () {!
var url = '/api/authorise';!
makeRequest(url, function (data, success) {!
this.token = data.token;!
this.emit('success', [‘_authorise']);!
});!
},!
_getUserInfo: function () {!
var url = '/api/getUserInfo/' + this.name +
'?token=' + data.token;!
makeRequest(url, function (data, success) {!
this.id = data.id;!
this.emit('success', [‘_getUserInfo']);!
});!
},!
_getUserRepos: function () {!
var url = '/api/getRepos/?uid=' + this.id + !
'?token=' + data.token;!
makeRequest(url, function (data, success) {!
this.repos = data.repos;!
this.emit('success', [‘_getUserRepos', this.repos]);!
});!
},!
getUserRepos: function (callback) {!
var that = this;!
that.on('success', function (e, method) {!
var offset = that.steps.indexOf(method);!
if (offset !== that.steps.length - 1) { // Other steps!
that[that.steps[offset + 1]];!
} else { // _getUserRepos!
callback(that.repos); !
}!
});!
that[that.steps[0]]();!
}!
};
My Solution
Before understanding Promise
• Break callbacks into
methods with semantic
naming
• Exchange data with
instance variables
• Make use of custom events
I am a big fan of Custom Events
Wolfy87/EventEmitter
Better but still not straightforward
Need read carefully to understand the trick
ex. sequence, error handling, and parallel events](https://image.slidesharecdn.com/josephj-promise-javascript-stackla-150604134255-lva1-app6892/85/JavaScript-Promise-9-320.jpg)
![Batch Promise
.then
var deferreds = [
gitHubber.getUserRepos(),
gitHubber.getUserProfile(),
gitHubber.getOrgaizations()
];
!
$.when(deferreds)
.done(fnFulfilled)
.fail(fnRejected);
All succeeds
Execute multiple promises together
One or more fails
Promises Array](https://image.slidesharecdn.com/josephj-promise-javascript-stackla-150604134255-lva1-app6892/85/JavaScript-Promise-14-320.jpg)
![1st Refactoring
Not attractive… :(
function GitHubber(name) {!
this.name = name;!
this.repos = [];!
this.deferreds = {};!
}!
!
var proto = {!
_authorise: function () {!
var that = this,!
url = '/api/authorise';!
!
that.deferreds._authorise = $.Deferreds();!
$.ajax(url, function (data) {!
that.deferreds._authorise.resolve(data);!
});!
return that.deferreds._authorise.promise();!
},!
_getUserInfo: function () {!
var that = this,!
url = '/api/getUserInfo/' + this.name + '?token=' + data.token;!
!
that.deferreds._getUserInfo = $.Deferreds();!
$.ajax(url, function (data) {!
that.deferreds._getUserInfo.resolve(data.id);!
});!
return that.deferreds._getUserInfo.promise();!
},!
_getUserRepos: function () {!
var that = this,!
url = '/api/getRepos/?uid=' + this.id + '?token=' + data.token;!
!
that.deferreds._getUserRepos = $.Deferreds();!
$.ajax(url, function (data) {!
that.deferreds._getUserRepos.resolve(data.repos);!
});!](https://image.slidesharecdn.com/josephj-promise-javascript-stackla-150604134255-lva1-app6892/85/JavaScript-Promise-15-320.jpg)
![function GitHubber (name) {!
this.name = name;!
this.token = null;!
that.repos = [];!
}!
!
var proto = {!
getUserRepos: function (callback) {!
var that = this,!
deferred = $.Deferred();!
!
if (that.repos.length) {!
deferred.resolve(that.repos);!
return;!
}!
!
$.ajax('/api/authorise')!
.then(function (data) {!
that.token = data.token;!
return $.ajax('/api/getUserInfo/' + that.name +'?token=' + data.token);!
})!
.then(function (data) {!
return $.ajax('/api/getRepos/?uid=' + data.uid + '?token=' + that.token);!
})!
.then(function (data) {!
that.repos = data.repos;!
deferred.resolve(data.repos);!
});!
!
return deferred.promise();!
}!
};
2nd: jQuery Promises
$.ajax
$.when
$.getJSON
$.ajax() is also a promise object!](https://image.slidesharecdn.com/josephj-promise-javascript-stackla-150604134255-lva1-app6892/85/JavaScript-Promise-16-320.jpg)
![function GitHubber (name) {!
this.name = name;!
this.token = null;!
that.repos = [];!
}!
!
var proto = {!
getUserRepos: function (callback) {!
var that = this,!
deferred = $.Deferred();!
!
if (that.repos.length) {!
deferred.resolve(that.repos);!
return;!
}!
!
$.ajax('/api/authorise')!
.then(function (data) {!
that.token = data.token;!
return $.ajax('/api/getUserInfo/' + that.name +'?token=' + data.token);!
})!
.then(function (data) {!
return $.ajax('/api/getRepos/?uid=' + data.uid + '?token=' + that.token);!
})!
.then(function (data) {!
that.repos = data.repos;!
deferred.resolve(data.repos);!
});!
!
return deferred.promise();!
}!
};
2nd: jQuery Promises
$.ajax
$.when
$.getJSON
$.ajax() is also a promise object!
You can reduce huge amount of code
by chaining & wrapping promise object properly](https://image.slidesharecdn.com/josephj-promise-javascript-stackla-150604134255-lva1-app6892/85/JavaScript-Promise-17-320.jpg)
JavaScript Promise
- 1. .then JAVASCRIPT PROMISE A Good JavaScript Abstraction Pattern @josephj6802
- 2. WHY Render multiple dropdowns with non-duplicate AJAX calls Need AJAX call? Any same URL is processing? Already has cached data? All selected values are matched … The reason I decided to investigate Promise…
- 3. ASYNC & CALLBACK Handle result when it’s done in the future
- 4. Asynchronous Code Everywhere in JavaScript setTimeout(function () {! // do something ! }, 1000); require(['lodash', 'jquery'], ! function (_, $) {! // do something with lodash and jQuery! }! ); $('form').on('submit', function (e) {! // do something when user submit form! });! ! $('img').on('load', function (e) {! // do something when img loaded! });! ! $('img').on('error', function (e) {! // do something when img fails loading! }); $.ajax('/terms.json', function () {! // do something after api data ! // being loaded! }) Delay RequireJS AJAX DOM Events fs.readFile('foo.txt', function () {! // do something after foo.txt ! // being loaded! }) Node.js
- 5. Asynchronous Code Everywhere is Callback setTimeout(function () {! // do something ! }, 1000); require(['lodash', 'jquery'], ! function (_, $) {! // do something with lodash and jQuery! }! ); $('form').on('submit', function () {! // do something when user submit form! });! ! $('img').on('load', function () {! // do something when img loaded! });! ! $('img').on('error', function () {! // do something when img fails loading! }); $.ajax('/terms.json', function () {! // do something after api data ! // being loaded! }) Delay RequireJS AJAX DOM Events fs.readFile('foo.txt', function () {! // do something after foo.txt ! // being loaded! }) Node.js
- 6. Asynchronous Code Everywhere is Callback setTimeout(function () {! // do something ! }, 1000); require(['lodash', 'jquery'], ! function (_, $) {! // do something with lodash and jQuery! }! ); $('form').on('submit', function () {! // do something when user submit form! });! ! $('img').on('load', function () {! // do something when img loaded! });! ! $('img').on('error', function () {! // do something when img fails loading! }); $.ajax('/terms.json', function () {! // do something after api data ! // being loaded! }) Delay RequireJS AJAX DOM Events fs.readFile('foo.txt', function () {! // do something after foo.txt ! // being loaded! }) Node.js Nothing wrong with Callback Use it when your scenario is simple
- 7. Sequencial Requests function GitHubber() {}! ! GitHubber.prototype.getUserRepos = function (name, callback) {! ! // Authorisation pass?! var url = '/api/authorize'; makeRequest(url, function (data, success) {! // (Omit) Callback if it fails… ! // Get user ID by name! url = '/api/getUserInfo/' + name + '?token=' + data.token;! makeRequest(url, function (data, success) {! // (Omit) Callback if it fails… ! // Get user's repo by user ID! url = '/api/getUserRepos?token=…&uid=' + data.uid;! makeRequest(url, function (data, success) {! // (Omit) Callback if it fails… ! // Finally success callback(data, true); });! });! });! }; API Authorisation Get User ID Get User Repos Token Token + User ID Callback Hell GitHubber#getUserRepos Question: How will you refactor it?
- 8. function GitHubber(name) {! this.name = name;! this.token = null;! this.id = null;! this.repos = [];! this.steps = ['_authorise', '_getUserInfo', '_getUserRepos'];! }! ! var proto = {! _authorise: function () {! var url = '/api/authorise';! makeRequest(url, function (data, success) {! this.token = data.token;! this.emit('success', [‘_authorise']);! });! },! _getUserInfo: function () {! var url = '/api/getUserInfo/' + this.name + '?token=' + data.token;! makeRequest(url, function (data, success) {! this.id = data.id;! this.emit('success', [‘_getUserInfo']);! });! },! _getUserRepos: function () {! var url = '/api/getRepos/?uid=' + this.id + ! '?token=' + data.token;! makeRequest(url, function (data, success) {! this.repos = data.repos;! this.emit('success', [‘_getUserRepos', this.repos]);! });! },! getUserRepos: function (callback) {! var that = this;! that.on('success', function (e, method) {! var offset = that.steps.indexOf(method);! if (offset !== that.steps.length - 1) { // Other steps! that[that.steps[offset + 1]];! } else { // _getUserRepos! callback(that.repos); ! }! });! that[that.steps[0]]();! }! }; My Solution Before understanding Promise • Break callbacks into methods with semantic naming • Exchange data with instance variables • Make use of custom events I am a big fan of Custom Events Wolfy87/EventEmitter
- 9. function GitHubber(name) {! this.name = name;! this.token = null;! this.id = null;! this.repos = [];! this.steps = ['_authorise', '_getUserInfo', '_getUserRepos'];! }! ! var proto = {! _authorise: function () {! var url = '/api/authorise';! makeRequest(url, function (data, success) {! this.token = data.token;! this.emit('success', [‘_authorise']);! });! },! _getUserInfo: function () {! var url = '/api/getUserInfo/' + this.name + '?token=' + data.token;! makeRequest(url, function (data, success) {! this.id = data.id;! this.emit('success', [‘_getUserInfo']);! });! },! _getUserRepos: function () {! var url = '/api/getRepos/?uid=' + this.id + ! '?token=' + data.token;! makeRequest(url, function (data, success) {! this.repos = data.repos;! this.emit('success', [‘_getUserRepos', this.repos]);! });! },! getUserRepos: function (callback) {! var that = this;! that.on('success', function (e, method) {! var offset = that.steps.indexOf(method);! if (offset !== that.steps.length - 1) { // Other steps! that[that.steps[offset + 1]];! } else { // _getUserRepos! callback(that.repos); ! }! });! that[that.steps[0]]();! }! }; My Solution Before understanding Promise • Break callbacks into methods with semantic naming • Exchange data with instance variables • Make use of custom events I am a big fan of Custom Events Wolfy87/EventEmitter Better but still not straightforward Need read carefully to understand the trick ex. sequence, error handling, and parallel events
- 11. PROMISE • A Programming Pattern • Specialise on Asynchronous Code • Better Maintainability • Easier for Scaling NOT another JavaScript framework
- 12. Create A Promise .then Returns promise immediately getUserRepos: function () { ! ! ! }, “Our workers will do all tasks for you” “Keep the ticket for now. I promise you will get a fulfilled or rejected result” • Pending • Fulfilled: that.repoDeferred.resolve(data.repos) • Rejected: that.repoDeferred.reject(‘service unavailable’) that.repoDeferred = new $.Deferred(); that.asyncTasks() return that.repoDeferred.promise(); “This task may take a while”
- 13. Use Promise .then gitHubber.getUserRepos() ! Chain-able fulfilled callback Rejected callback Promise is still callback • .then(fnFulfilled, fnRejected) • .done(fnFulfilled) • .fail(fnRejected) .then(function (repos) {}) .catch(function (msg) {});
- 14. Batch Promise .then var deferreds = [ gitHubber.getUserRepos(), gitHubber.getUserProfile(), gitHubber.getOrgaizations() ]; ! $.when(deferreds) .done(fnFulfilled) .fail(fnRejected); All succeeds Execute multiple promises together One or more fails Promises Array
- 15. 1st Refactoring Not attractive… :( function GitHubber(name) {! this.name = name;! this.repos = [];! this.deferreds = {};! }! ! var proto = {! _authorise: function () {! var that = this,! url = '/api/authorise';! ! that.deferreds._authorise = $.Deferreds();! $.ajax(url, function (data) {! that.deferreds._authorise.resolve(data);! });! return that.deferreds._authorise.promise();! },! _getUserInfo: function () {! var that = this,! url = '/api/getUserInfo/' + this.name + '?token=' + data.token;! ! that.deferreds._getUserInfo = $.Deferreds();! $.ajax(url, function (data) {! that.deferreds._getUserInfo.resolve(data.id);! });! return that.deferreds._getUserInfo.promise();! },! _getUserRepos: function () {! var that = this,! url = '/api/getRepos/?uid=' + this.id + '?token=' + data.token;! ! that.deferreds._getUserRepos = $.Deferreds();! $.ajax(url, function (data) {! that.deferreds._getUserRepos.resolve(data.repos);! });!
- 16. function GitHubber (name) {! this.name = name;! this.token = null;! that.repos = [];! }! ! var proto = {! getUserRepos: function (callback) {! var that = this,! deferred = $.Deferred();! ! if (that.repos.length) {! deferred.resolve(that.repos);! return;! }! ! $.ajax('/api/authorise')! .then(function (data) {! that.token = data.token;! return $.ajax('/api/getUserInfo/' + that.name +'?token=' + data.token);! })! .then(function (data) {! return $.ajax('/api/getRepos/?uid=' + data.uid + '?token=' + that.token);! })! .then(function (data) {! that.repos = data.repos;! deferred.resolve(data.repos);! });! ! return deferred.promise();! }! }; 2nd: jQuery Promises $.ajax $.when $.getJSON $.ajax() is also a promise object!
- 17. function GitHubber (name) {! this.name = name;! this.token = null;! that.repos = [];! }! ! var proto = {! getUserRepos: function (callback) {! var that = this,! deferred = $.Deferred();! ! if (that.repos.length) {! deferred.resolve(that.repos);! return;! }! ! $.ajax('/api/authorise')! .then(function (data) {! that.token = data.token;! return $.ajax('/api/getUserInfo/' + that.name +'?token=' + data.token);! })! .then(function (data) {! return $.ajax('/api/getRepos/?uid=' + data.uid + '?token=' + that.token);! })! .then(function (data) {! that.repos = data.repos;! deferred.resolve(data.repos);! });! ! return deferred.promise();! }! }; 2nd: jQuery Promises $.ajax $.when $.getJSON $.ajax() is also a promise object! You can reduce huge amount of code by chaining & wrapping promise object properly
- 18. Promise v.s. Callback Why Promise? var promise = $.ajax(url);! promise.done(callback); $.ajax(url, callback) Promise Callback • Portability - async task must be fulfilled or rejected in delegated methods. • Consistency - .resolve(), .reject() , .then(), .done(), .catch(), rejected, fulfilled, pending • Chaining - .then() makes sequential tasks easier to execute • Straightforward - .then() makes our code easier to read “First-class API for asynchronous tasks”
- 19. Scalability UserSession.signIn() .then(this._promisePurchase(video)) Using JavaScript Promises to Reason About User Interaction Abstracted Session Checking, Login Popup, Validation, Video Purchasing and Watching Video with Promise!
- 20. With Promise… .then • We defines sequence in a very straightforward way (.then) • Built-in error handling API (.fail) • Batch execute parallel tasks easily (Promise.all) Solved a lot of async design issues
- 21. PROMISE IN THE WILD Environments and Libraries for Promise Standard Spec: Promises/A+
- 22. Promise in Browsers All Modern browsers support Promise except IE 11 and all its earlier versions
- 23. Promise & jQuery jQuery’s Deferreds aren't Promise/A+ compliant. Please avoid to use if you want to use Promise extensively. $.Deferred $.when
- 24. Promise in Node.js Node.js added native promise in stable version 0.12 … comes with memory leak
- 25. Libraries For both Browser and Node.js • Q.js A tool for creating and composing asynchronous promises in JavaScript • RSVP.js A lightweight library that provides tools for organising asynchronous code • when.js A solid, fast Promises/A+ and when() implementation, plus other async goodies. • bluebird (most popular) Bluebird is a full featured promise library with unmatched performance.
- 26. Libraries For both Browser and Node.js • Q.js A tool for creating and composing asynchronous promises in JavaScript • RSVP.js A lightweight library that provides tools for organising asynchronous code • when.js A solid, fast Promises/A+ and when() implementation, plus other async goodies. • bluebird (most popular) Bluebird is a full featured promise library with unmatched performance. Currently you probably need library for polyfills Use jQuery Deferred with awareness
- 27. Q & A • Promise - A Programming Pattern • Specialise on Asynchronous Code • Better Maintainability • Easier for Scaling “First-class API for asynchronous tasks”
- 28. Thank You!