Understanding promises
@nolanlawson
You may remember me from
Oh and one more thing. You won't find any "I promise to call you
back" jokes in this talk. OK, they
were funny the first time, I get it, but please, can we just agree
to stop with these? If I see one more of these, I'm going to start
a change.org petition, I swear.
Callbacks vs promises
// callbacks
fs.readFile('myfile.txt', function (err, contents) {
if (err) {
return handleError(err);
}
handleFile(contents);
});
// promises
fs.readFileAsync('myfile.txt')
.then(handleFile)
.catch(handleError)
});
I wrote it because I work on a very promise-heavy open-source library
called PouchDB, and I was tired of perusing the questions on
Stack Overflow and seeing the same errors again and again.
So the reason I'm standing in front of you right now
is because I wrote this article on promises.
I wrote this article, which has been described rather accurately
as a "tutorial disguised as a rant." That's pretty much what it is.
Why do we need promises in JavaScript?
Promises aren't unique to JavaScript, and they've gone by
other names in other languages - futures, thunks, etc. But
they're uniquely useful in JavaScript due to the design
of the language.
JavaScript is single-threaded
https://gist.github.com/hellerbarde/2843375
JavaScript XHR
var xhr = new XMLHttpRequest();
xhr.onerror = function (err) {
// handle success
};
xhr.onload = function (res) {
// handle error
};
xhr.open('GET', 'http://oursite.com/ourapi/');
The guy who designed JavaScript, Brendan Eich, was pretty smart.
and one of the interesting design decisions he made for
JavaScript was to make it single-threaded, with callbacks for
AJAX requests. In JavaScript, this allows the single thread to
continue working, e.g. responding to user clicks or updating
the DOM, even when an HTTP request is ongoing.
Node.js fs
var fs = require('fs');
fs.readFile('/tmp/myfile.txt', 'utf-8', function (err, text) {
if (err) {
// handle error
} else {
// handle success
}
});
This style continued with Node.js, and in fact it's the primary
reason Ryan Dahl chose JavaScript for his single-threaded server
framework. Here's a filesystem operation, which doesn't exist
in the browser, but which looks very similar to the ajax
request we saw earlier.
So, in JavaScript, it's extremely obvious when a piece of code
goes to the disk or to the network, because there's this
awkward callback style you have to deal with. And it turns out
this is kind of nice, because as this infographic shows,
the network is much slower than the disk, which is much slower
than anything done in-memory. My takeaway is: disk is about a
zillion times slower than in-memory, and the network is about
a zillion times slower than that.
So JavaScript makes it really obvious when you're going to disk
or the network, which can be nice for identifying bottlenecks
or for ensuring that your single-threaded language doesn't spend
any time waiting on I/O. And when webapps were using some light
jQuery for a few ajax requests, which were almost never chained
together, this was almost tolerable. But when Node.js came along,
it just ended up being a huge hassle to write everything in this
pyramid style when you just want to do a few I/O operations.
The Node community tried to solve this early on by standardizing
everything related to callbacks. But really this was just a convention,
and nobody was forced to adhere to it, and people frequently
messed it up. A common source of errors was accidentally calling
a callback twice, or zero times, or with both an error and
a result, etc. Lots of libraries sprang up proposing to solve
this problem, such as async and q. But in fact they had very different
and incompatible approaches, and jQuery and Angular had their own,
so out of all this mess a few very smart people managed to hammer
together a spec, and got almost everybody to agree on a small core
of best practices, which they called the Promises A+ spec. Today
this is enshrined in ES6, and it's in every major browser and soon
Node.js, so it's here for the long haul. The only major holdouts
are, sadly, jQuery and async. But you can convert their style to
the official style, or just not use them.
Okay, so everybody started using promises, and everything was great,
right? Well, not exactly. First off, there is some confusion
about which libraries and browsers actually use promises, and then
second off there is confusion about how to use promises correctly.
Let's talk about the libraries and browsers first.
The pyramid of doom
doSomething(function (err) {
if (err) { return handleError(err); }
doSomethingElse(function (err) {
if (err) { return handleError(err); }
doAnotherThing(function (err) {
if (err) { return handleError(err); }
// handle success
});
});
});
function handleError(err) {
// handle error
}
doSomething(function (err) {
if (err) { return handleError(err); } // wait why is my code
doSomethingElse(function (err) {
if (err) { return handleError(err); } // on a deathmarch
doAnotherThing(function (err) {
if (err) { return handleError(err); } // to the right of the screen
// handle success
});
});
});
function handleError(err) {
// handle error
}
Promises to the rescue!
doSomething().then(function () {
return doSomethingElse();
}).then(function () {
return doAnotherThing();
}).then(function (result) {
// yay, I'm done
}).catch(function (err) {
// boo, I got an error
});
doSomething().then(function () {
return doSomethingElse(); // ________
}).then(function () { // |__MEOW__|
return doAnotherThing(); // \_/
}).then(function (result) { // /\_/\
// yay, I'm done // ____/ o o \
}).catch(function (err) { // /~____ =ø= /
// boo, I got an error // (______)__m_m)
});
Top 3 worst promise mistakes
1. The promisey pyramid of doom
doSomething().then(function () {
doSomethingElse().then(function () {
doAnotherThing().then(function () {
// handle success
}).catch(function (err) {
// handle error
});
}).catch(function (err) {
// handle error
});
}).catch(function (err) {
// handle error
});
1. Solution: don't do that
doSomething().then(function () {
return doSomethingElse();
}).then(function () {
return doAnotherThing();
}).then(function (result) {
// handle success
}).catch(function (err) {
// handle error
});
2. Forgetting to catch()
playWithFire().then(function () {
return liveDangerously();
}).then(function () {
return betTheFarm();
}).then(function (result) {
// handle success
}); // ← forgot to catch. any errors will be swallowed
2. Solution: add a catch()
playWithFire().then(function () {
return liveDangerously();
}).then(function () {
return betTheFarm();
}).then(function (result) {
// handle success
}).catch(console.log.bind(console)); // ← this is badass
3. Forgetting to return
goToTheATM().then(function () {
grabMyCash();
}).then(function () {
grabMyCard();
}).then(function (result) {
// grabMyCash() and grabMyCard()
// are not done yet!
}).catch(console.log.bind(console));
3. Solution: always return or throw inside a then() function
goToTheATM().then(function () {
return grabMyCash();
}).then(function () {
return grabMyCard();
}).then(function (result) {
// yay, everything is done
}).catch(console.log.bind(console));
Promises - the one weird trick
someLibrary.doSomething().then(function () {
// I'm inside a then() function!
});
Promises - the one weird trick
someLibrary.doSomething().then(function () {
// 1) return another promise
return someLibrary.doSomethingElse();
// 2) return a synchronous value
return {hooray: true};
// 3) throw a synchronous error
throw new Error('oh noes');
});
Promises - the one weird trick
db.get('user:nolan').then(function (user) {
if (user.isLoggedOut) {
throw new Error('user logged out!'); // throwing a synchronous error!
}
if (inMemoryCache[user.id]) {
return inMemoryCache[user.id]; // returning a synchronous value!
}
return db.get('account:' + user.id); // returning a promise!
}).then(function (userAccount) {
// I got a user account!
}).catch(function (err) {
// Boo, I got an error!
});
OK, how do I use promises?
window.Promise
in browsers
Node-style → Promise-style
var bluebird = require('bluebird');
var fs = bluebird.promisifyAll(require('fs'));
fs.readFileAsync('/tmp/myfile.txt', 'utf-8').then(function (text) {
// handle success
}).catch(function (err) {
// handle error
});
Things that are not Promises ಠ_ಠ
async
jQuery promises
jQuery deferreds
Angular deferreds
Anything spelled "deferred"
Uncaught error - silently ignored :(
Promise.resolve().then(function () {
throw new Error("aw shucks");
});
Node.js and non-Chrome browsers don't log this.
Uncaught error - warning logged! :)
Bluebird and Chrome native Promises show warnings.
Async stacktraces in Chrome
Experimental Chrome dev tools
Experimental promises tab
Bluebird 3.0 warnings
Onward with ES7 async/await
With ES6
function createDocAndReturnIt() {
return db.post({}).then(function (result) {
return db.get(result.id);
});
}
With ES7 async/await
async function createDocAndFetchIt() {
let result = await db.post({});
return await db.get(result.id);
}
With ES6 (more complex)
function getDocOrEmpty(id) {
db.get(id).catch(function (err) {
if (err.status === 404) { // not found
return {}; // empty doc
}
throw err; // some error other than 404
});
});
With ES7 async/await (more complex)
async function getDocOrEmpty(id) {
try {
return await db.get(id);
} catch (err) {
if (err.status === 404) { // not found
return {}; // empty doc
}
throw err; // some error other than 404
}
}
Promises are confusing.
ES7 will save us.
@nolanlawson
http://nolanlawson.github.io/queensjs-2015-11/