Async/Await Class Constructor

Question

At the moment, I'm attempting to use

async/await

within a class constructor function. This is so that I can get a custom

e-mail

tag for an Electron project I'm working on.

customElements.define('e-mail', class extends HTMLElement {

  async constructor() {

    super()



    let uid = this.getAttribute('data-uid')

    let message = await grabUID(uid)



    const shadowRoot = this.attachShadow({mode: 'open'})

    shadowRoot.innerHTML = `

      <div id="email">A random email message has appeared. ${message}</div>

    `

  }

})

At the moment however, the project does not work, with the following error:

Class constructor may not be an async method

Is there a way to circumvent this so that I can use async/await within this? Instead of requiring callbacks or .then()?

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

This can never work.

The async keyword allows await to be used in a function marked as async but it also converts that function into a promise generator. So a function marked with async will return a promise. A constructor on the other hand returns the object it is constructing. Thus we have a situation where you want to both return an object and a promise: an impossible situation.

You can only use async/await where you can use promises because they are essentially syntax sugar for promises. You can't use promises in a constructor because a constructor must return the object to be constructed, not a promise.

There are two design patterns to overcome this, both invented before promises were around.

Use of an init() function. This works a bit like jQuery's .ready(). The object you create can only be used inside it's own init or ready function:

Usage:

var myObj = new myClass();
myObj.init(function() {
    // inside here you can use myObj
});

Implementation:

class myClass {
    constructor () {

    }

    init (callback) {
        // do something async and call the callback:
        callback.bind(this)();
    }
}

Use a builder. I've not seen this used much in javascript but this is one of the more common work-arounds in Java when an object needs to be constructed asynchronously. Of course, the builder pattern is used when constructing an object that requires a lot of complicated parameters. Which is exactly the use-case for asynchronous builders. The difference is that an async builder does not return an object but a promise of that object:

Usage:

myClass.build().then(function(myObj) {
    // myObj is returned by the promise, 
    // not by the constructor
    // or builder
});

Implementation:

class myClass {
    constructor (async_param) {
        if (typeof async_param === 'undefined') {
            throw new Error('Cannot be called directly');
        }
    }

    static build () {
        return doSomeAsyncStuff()
           .then(function(async_result){
               return new myClass(async_result);
           });
    }
}

Implementation with async/await:

class myClass {
    constructor (async_param) {
        if (typeof async_param === 'undefined') {
            throw new Error('Cannot be called directly');
        }
    }

    static async build () {
        var async_result = await doSomeAsyncStuff();
        return new myClass(async_result);
    }
}

Note: although in the examples above we use promises for the async builder they are not strictly speaking necessary. You can just as easily write a builder that accept a callback.

Async/Await Class Constructor

Sign up