async関数においてtry/catchではなくawait/catchパターンを活用する

赤芽
2 min readAug 25, 2017
Thank you async/await and catch

ご存知の通り、async/awaitはとても美しく明快であり、JS界隈の誰もが待ち望んだ機能であります。

async/awaitのエラーハンドリングはtry/catchで行うのが一般的です。
しかし、これは複数のawaitを使い、それぞれ別のエラーハンドリングを行いたい場合など、冗長になりがちです。

そして、特に気に入らないのが、tryのスコープ外で非同期関数の戻り値を使う場合、letを使う必要があるところです。

そこで、await/catchパターンを活用して、これを改善してみましょう。

await/catch パターン

上記をawait/catchパターンで書き換えてみます。

グレート!
あの忌々しいletが消え去り、constにより平和が訪れました。ああ、不変性の美しきかな。なにより、ネストが減るのがいいですね。

もう一つパターンを見てみましょう。

複数のasync関数のエラーをそれぞれ別々にハンドリングする必要ある場合です。

完璧です。
完全に冗長な記述が消え、シンプルなコードになりました。

結局のところ、async関数はPromiseを返す関数でしかなく、awaitはPromiseの解決を待つので、catchをそのまま使えるわけです。

Tips

もちろんawaitとthenを組み合わせることができます。
これは、いちいち変数を用意するまでもない(むしろ冗長な)連続した処理に活用できるでしょう。

const x1 = await func()
const x2 = awiat filter1(x1)
const x3 = await filter2(x2)
// ↓ ↓ ↓const x = await func().then(filter1).then(filter2)

まとめ

await catchパターンを活用することで、コードが簡潔になることがわかりました。
何かあれば、コメント欄またはツイッターにて議論しましょう。

重要

ただいま無職につきお仕事ください。

--

--