クラス Hoge にメソッドとして async A メソッドを実装する。これは内部に await を必要とする関数(fetch等)呼び出しがあるため仕方なくやっている。

A は await で同期的に処理を進めながら、最終的には何もリターンしない。

この A 処理をクラス Hoge のコンストラクタ内で、別の DOM の click イベントに addEventListener でフックする。 何か押したら、処理が動く、普通にやりそうな形である。 リターンが無いので、そのままぶっ放せばOKなのだと思うがそうならない。

まず、async のメソッドはシンタックスシュガーになっていて、return する値を resolve とする Promise を返すようになっている。 この resolve を解決して中身、つまり return していた値を取り出すのが await となる。

とすると、addEventListener でフックする関数内で await 呼び出しとなり、そのメソッドは async となり、それが作られる constructor 全体は非同期処理となる。 しかしながら constructor の戻りは Promise でなく生成された this なので、constructor 内で async メソッドを絡めることが出来ないという問題がおきる。

今回の場合は戻りが無いので resolve しても何もしないなのだが、これは処理が成立するしないという問題ではなく、文法上の問題のようで、そもそも動かないということになる。

しかも、これが Google Chrome と Firefox で解釈が違う。 Firefox では async が戻す Promise 無視してぶっ放しても実行は実行としてやってくれる。 Google Chrome は async があるから、await でセットで書けよということで、そもそも文法エラーで動かない。

ということでコンストラクタとのあわせ技一本で実装できないということになる。

ここでこのような戻りを考えなくてもいいが実装上 async にしないといけないメソッドをぶっ放すには

this.piyo().then(function(){});

行き場のない Promise を then で焼却してしまえばよい