技術とかの雑なToday I Learnedメモ

then/catchとトップレベルawait

トップレベルではthen/catchを使うしかない?

昨日の async/await の記事を色々読んでいた。

Async/await

async/await を使用するとき、.then はほとんど必要がありません。なぜなら await は私たちを待っているからです。そして .catch の代わりに通常の try..catch を使うことができます。それは通常(常にではないですが)より便利です。しかし、コードの最上位のレベルでは、async 関数の外にいるときは構文的に await を使うことができないため、最終的な結果または落ちるようなエラーを処理するために .then/catch を追加するのが普通です。

つまり、async/await で非同期処理を行う関数を定義したとしても、それを最上位レベルで呼んでいるところでは結局then/catchを使って処理するしかないっぽい。

トップレベルでは async/await の関数を呼び出した場合返ってくるのが絶対に Promise なので、その Promise を処理する必要があるけど、トップレベルでは await が使えないのでthen/catchで処理するしかない。

トップレベル await

上記の問題に関して、トップレベル await を使えば解決しそうと思ったので調べた。

トップレベル await、聞いたことはあったけど聞いたことがあっただけなのでちょっと見てみたけど、めちゃくちゃシンプルで、トップレベルで aysnc をつけなくても await できるというめちゃ便利なやつだった。

top-level await がどのように ES Modules に影響するのか完全に理解する - Qiita

Node.js で Top-Level Await を試す - Qiita

Node.js では v14.3.0 からサポートされていて、ECMAScript では(この記事の時点では)Stage3 らしい。

Stage 3 というのはもう言語機能のデザインが終了して正式採用間近という段階であり、このステージに達したものは TypeScript にも導入されます。

知らなかった……。

ちなみに今プロポーザルを見に行ったら Stage4 だった。

tc39/proposal-top-level-await: top-level `await` proposal for ECMAScript (stage 4)

使ってる TS のバージョンも Node.js のバージョンもクリアしていたのでトップレベル await を使おうとしたら Vetur に怒られた。原因を調べてみます。