Greenletを試す

developit/greenlet: 🦎 Move an async function into its own thread.

Greenletは単純に言うと、WebWorkerをシンプルに扱えるようにしたライブラリ。

Web Workers API - Web API インターフェイス | MDN

index.html

<script src="https://unpkg.com/greenlet@0.1.2/dist/greenlet.umd.js"></script>
<script>
const getName = greenlet(async username => {
  const url = `https://api.github.com/users/${username}`
  const res = await fetch(url)
  const profile = await res.json()
  return profile
})

getName('akameco').then(console.log).catch(console.error);
</script>

面倒なので、何も考えずparcelで

$ parcel index.html

DevtoolのConsoleタブで開くと結果が得られているのがわかると思う。
また、SourcesタブのNetworkを見ると、差し込まれたWorkerがわかる。

ちなみに実装的にgreenletおよびWorkerのコードにブレークポイントを置いても、greenletの実装的にデバッグするのは不可能。

どうなっているかというと、関数を文字列としてdata URIにするという実装をしている。
ここまで書くとわかるようにスコープ外の変数はもちろん使えない。(まあWebWorkerなので当たり前だけど)