Vueと共通

【Nuxt.js】Nuxt文法編:try/catch

前置き

今回は非同期通信で使う
try/catchをやっていきます💫

JSONplaceholder
postsデータを取得・表示します。

⬇️こちらの記事で
 非同期通信の基本を解説しています👀
 (Promise, async/awaitなど)
【Nuxt.js】Nuxt文法編:asyncData


try/catchとは

エラーハンドリングです。
なので基本的なコードは
こんな感じです。

非同期通信では
・通常の場合
・エラー(例外)の場合
分けて処理をしたいので
非同期通信async
組み合わせて使うわけです🧙‍♀️

asyncは非同期通信の構文です。
Promiseよりも簡潔に
非同期処理が書けるのがメリット🌟
そしてasync/awaitで1セット💫


サンプルコード

以前に非同期通信の解説で使用した
JSONplaceholderデータの取得用コード
こちらのBefore Afterを
見てみましょう👀
【Nuxt.js】Nuxt文法編:asyncData

After

tryの中に処理を移動させて
catchでエラーのパターンを
追加しただけです!!
シンプルですね✨


Before


まとめ

それぞれの役割を明確にすることで
asyncの中でtrycatchで分岐して…
と構図が分かりやすくなりますね💫

非同期通信の書き方は
バリエーションがあるので
ぜひやってみてください♪

-Vueと共通
-,

© 2021 aLiz Nuxt