Awaiting for async promises in JavaScript

This post originated as a comment to Daniel Warren’s post Clarifying Async and Promises and I decided to repost it as a separate article because it might be useful to others.

I was exploring the other day the possibilities beyond the “then/catch” pattern with promises because to me it still looks like callbacks, neater and cleaner but there has to be a better way, for readability’s sake.

In Python land (see the Twisted framework which influenced Node.js) this problem has been already met. In Twisted promises are called “deferreds” but the issue is the same: cascading callbacks, error handlers, callbacks to your error handlers, sibling callbacks and error handlers can still become a mess to read and understand:

.then(() => {}).then(() => {}).then(() => {}).catch((err) => {})

or in Twisted


What they came up with is:

a decorator named inlineCallbacks which allows you to work with Deferreds without writing callback functions.

So in Twisted you can do this:

def getUsers(self):
        responseBody = yield makeRequest("GET", "/users")
    except ConnectionError:
       log.failure("makeRequest failed due to connection error")
       return []

   return json.loads(responseBody)

makeRequest returns a deferred (a promise) and this way instead of attaching callbacks and error handlers to it you can wait for the response to come back and if an error arises you handle it there and then with try...except (try/catch in JS). In the latest Python versions you can even do this:

async def bar():
    baz = await someOtherDeferredFunction()
    fooResult = await foo()
    return baz + fooResult

So you can basically use await for the deferred/promises to resolve and write synchronous-looking code instead of attaching callbacks, which brings me back to JavaScript and async/await (same keywords of Python, don’t know which came first :D).

Instead of attaching callbacks and error handler to your promise you can use async/await to write more readable code:

async function bar() {
  const a = await someFunction();
  const b = await someOtherFunction();
  return a + b;

I found this video by Wes Bos very informing: