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 its 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
});
// with async/await:
async function foo () {
var myObj = await myClass.build();
}
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.
Note on calling functions inside static functions.
This has nothing whatsoever to do with async constructors but with what the keyword this
actually mean (which may be a bit surprising to people coming from languages that do auto-resolution of method names, that is, languages that don't need the this
keyword).
The this
keyword refers to the instantiated object. Not the class. Therefore you cannot normally use this
inside static functions since the static function is not bound to any object but is bound directly to the class.
That is to say, in the following code:
class A {
static foo () {}
}
You cannot do:
var a = new A();
a.foo() // NOPE!!
instead you need to call it as:
A.foo();
Therefore, the following code would result in an error:
class A {
static foo () {
this.bar(); // you are calling this as static
// so bar is undefinned
}
bar () {}
}
To fix it you can make bar
either a regular function or a static method:
function bar1 () {}
class A {
static foo () {
bar1(); // this is OK
A.bar2(); // this is OK
}
static bar2 () {}
}
<e-mail data-uid="1028"></email>
and from there is populated with information using thecustomElements.define()
method. – Slattery.init()
to do the async stuff. Plus, since you're sublcass HTMLElement, it is extremely likely that the code using this class has no idea it's an async thing so you're likely going to have to look for a whole different solution anyway. – Postimpressionismasync constructor(
…){
…}
inside classes, and evenasync class
. – Megasporeasync constructor(){ this.property = (await import(theModule)).theMethod(); }
would be nice. But I realized that modules serve as a nice analogy of singleton classes with an async constructor. After all, they allow top-levelawait
, and because they only run once, they’ve been referred to as “singletons” before. – Megaspore