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

2021.04.06

前置き

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

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

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

try/catchとは

try {
  // 通常の場合の実行式
} catch() {
  // 例外の場合の実行式
}

try {

// 通常の場合の実行式

} catch() {

// 例外の場合の実行式

}

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

try {
  // 通常の場合の実行式
} catch(error) {
  console.log(error)
}

try {

// 通常の場合の実行式

} catch(error) {

console.log(error)

}

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

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

サンプルコード

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

After

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

<template>
 <div class="page">
    <ul>
      <li v-for="post in posts" :key="post.id">
        {{ post.title }}
      </li>
    </ul>
 </div>
</template>

<script>
import axios from 'axios'

export default {
  async asyncData () {
    try {
      const res = await axios.get('https://jsonplaceholder.typicode.com/posts')
      return { posts: res.data }
    } catch (error) {
      console.log(error)
    }
  }
}
</script>

<ul>

</li>

</ul>

</div>

</template>

import axios from 'axios'

export default {

async asyncData () {

try {

const res = await axios.get('https://jsonplaceholder.typicode.com/posts')

return { posts: res.data }

} catch (error) {

console.log(error)

}

</script>

Before

<template>
 <div class="page">
    <ul>
      <li v-for="post in posts" :key="post.id">
        {{ post.title }}
      </li>
    </ul>
 </div>
</template>

<script>
import axios from 'axios'

export default {
  async asyncData () {
    const res = await axios.get('https://jsonplaceholder.typicode.com/posts')
    return { posts: res.data }
  }
}
</script>

<ul>

</li>

</ul>

</div>

</template>

import axios from 'axios'

export default {

async asyncData () {

const res = await axios.get('https://jsonplaceholder.typicode.com/posts')

return { posts: res.data }

}

</script>

まとめ

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

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