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 a Promise, that itself, once invoked after it's declared, executes a setTimeout that runs after 3500 milliseconds (3.5 seconds)
• We assign the promiseToResolve function to a variable called promise. At this point, our Promise's setTimeout is invoked
• We tell our Promise via the promise variable, that when the Promise is done, then do something else. In this case, the Promise is resolved with a value of 42, and that is what is logged to the screen via console.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 is promised 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:

• Discoverability, Semantic Markup & Accessibility

---

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.