Blog: Asynchronous JavaScript: On Promises

June 2015
When dealing with lots of data on a rich user interface, like the Tesla Design Studio, having a predictable way on when to respond to asynchronous
, or async
, calls is critical: vital for performance and for helping build an overall great user experience that works.
Design is not just what it looks like and feels like. Design is how it works. — Steve Jobs

Promises in ES6
ES6 is improving the Promises
concept, which has been around for a while in other languages. As a quick reminder, or for folks who are new to ES6
, ES6
is a shortened named for ECMAScript 6
, or ECMAScript 2015
, or even JavaScript 6
. ES6 is the next iteration of JavaScript, which introduces some new features, like let
and const
for variables, arrow functions, and some native utilities for dealing with arrays (lists), to name a few things, not to mention Promises
.
Types of requests
in Web development, there are both types of scenarios: a synchronous
call and an asynchronous
one. The former being a blocking request, which, when invoked, performs an action, and while doing so, all things stall until this action completes, then subsequent actions can continue. An asynchronous
request is similar, however, it doesn't stall processes (or your application), it merely invokes the action, allows your program to continue, then, when your asynchronous
request is finished, it'll perform whatever action you told it to execute.
So, what does a promise look like? Here's a basic example:
function promiseToResolve() {
return new Promise( (resolve, reject) => {
setTimeout( () => {
resolve(42);
}, 3500);
});
}
let promise = promiseToResolve();
promise.then((value) => console.log(value));
console.log("Hey ma and pa, ¡que pasa!");
Let's dig into the above:
- We've created a function called
promiseToResolve
, which returns aPromise
, that itself, once invoked after it's declared, executes asetTimeout
that runs after3500
milliseconds (3.5 seconds) - We assign the
promiseToResolve
function to a variable calledpromise
. At this point, ourPromise
'ssetTimeout
is invoked - We tell our
Promise
via thepromise
variable, that when thePromise
is done,then
do something else. In this case, thePromise
isresolved
with a value of42
, and that is what is logged to the screen viaconsole.log(value)
.
Important: Even though there is a console.log("Hey ma and pa, ¡que pasa!")
written as the sequentially last task to run in our small, example program above, it actually is not the last action to run. Do you know what is the last? Can you deduce why?
What else does a Promise
tell me?
A Promise
has three (3) states:
- Pending
- Fulfilled
- Rejected
And you can respond to each of these states accordingly in your app or website.
A
Promise
is an object that holds a value that ispromised
to be given to you at some point in time to respond to accordingly.
Summary
Being able to have a reliable, deterministic API for dealing with asynchronous
scenarios is incredibly useful and powerful. Async
effectively mirrors the real-world around us, and naturally carries over to the way our users expect to conduct business through our online apps, sites, etc. It would be a bummer, for instance, if users had to wait for every small-to-large click event to complete before they could proceed with, say, configuring and ordering an electric car. Now, don't get me wrong: waiting for requests to complete before doing something else has their place, even in parallel with Promises
, and on the Tesla Design Studio, but it's good to have flexible options to work under for both: async
and sync
requests, and avoid the dreaded callback hell
scenario.
Keep an eye out for Promises
and additional features that are slated to roll-out in JavaScript-land over the next few years: it's Promising
to be huge! ;)
Related:

I operate from a place of compassion, possibility and imagination. My work and efforts share a common goal: create a better, sustainable and equitable world by building inclusive communities, products & experiences.