【Nuxt.js】非同期通信まわりまとめ

前置き

非同期通信まわりって
結構むずかしいですよね？、、、

どれが何の役割で
どこに書いて、
どれと何を組み合わせれば良いの！？

と思った人は私だけではないはず。。。

asyncとasyncDataって何が違うの？
tryと.thenって似てるような？
最初はとにかく混乱しました笑

それぞれの役割を確認し、
ベースのコードに肉付けしていき、
コードを書く流れが
分かるようにしました

過去記事で詳細を確認したい方はこちら
【Nuxt.js】Nuxt文法編：非同期通信やasyncDataの使い方
 【Nuxt.js】Nuxt文法編：try/catch
【Nuxt.js】Nuxt文法編：fetch
【Nuxt.js】nuxt/axiosを導入しよう

役割

非同期通信のグループ化

あくまでもグループ化だけで
通信自体は他の物に任せます

methods発火など
アクションを起こさずとも
非同期通信したい時に使います

asyncData は
returnで値を返す時、
Vuexを使用しない時

fetchは
値を返さない時
Vuexを使用する時に使います

asyncData

<script>
export default {
  asyncData () {
    // 通信
    return {}
  }
</script>

export default {

asyncData () {

// 通信

return {}

}

</script>

fetch

<script>
export default {
  async fetch ({ store }) {
    store.commit('hoge')
  },
}
</script>

export default {

async fetch ({ store }) {

store.commit('hoge')

}

</script>

通信とPromise

通信

axios

データの通信自体をするものなので
asyncData, fetch内で使用

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

export default {

asyncData ({ $axios }) {

const data = $axios.$get('https://jsonplaceholder.typicode.com/posts')

return { data }

}

</script>

Promise(.then/.catchまたはasync/awaitを使用)

.then/.catch

Promiseです。
axiosの通信に対してなので、
axiosの後ろに書きます
通信が成功した場合が.then
通信でエラーの場合が.catch

<script>
export default {
  asyncData ({ $axios }) {
    return $axios.$get('https://jsonplaceholder.typicode.com/posts')
      .then ((res) => {
        return { res }
      })
      .catch ((error) => {
        console.log(error)
      })
  },
}
</script>

export default {

asyncData ({ $axios }) {

return $axios.$get('https://jsonplaceholder.typicode.com/posts')

.then ((res) => {

return { res }

})

.catch ((error) => {

console.log(error)

})

}

</script>

async/await

必ずセットで使用
asyncが非同期通信するもので
awaitがPromise
=空のデータが返ることを防ぐ
.thenの代わりにもなるので、
.then/.catchまたは
async/awaitどちらか1つを使用します

asyncは非同期を担うので
asyncData部分に書き、
awaitは通信をするaxios部分に書きます

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

export default {

async asyncData ({ $axios }) {

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

return { data }

}

</script>

<script>
export default {
  methods: {
    async submit () {
      try {
        const user = await this.$fire.firestore.collection('sample')
          .add({
            user: this.user // data内のuserオブジェクトを送信
          })
        console.log(user)
      } catch (error) {
        console.log(error)
      }
    },
  },
}
</script>

export default {

methods: {

async submit () {

try {

const user = await this.$fire.firestore.collection('sample')

.add({

user: this.user // data内のuserオブジェクトを送信

})

console.log(user)

} catch (error) {

console.log(error)

}

</script>

その他

try/catch

例外処理、
エラーハンドリング

非同期通信のasyncに対しての
実行式になるので、
asyncでネストさせて書きます

<script>
export default {
  async asyncData ({ $axios }) {
    try {
      // 通常の実行式
    } catch (error) {
      // 例外の実行式
    }
  },
}
</script>

export default {

async asyncData ({ $axios }) {

try {

// 通常の実行式

} catch (error) {

// 例外の実行式

}

</script>

流れ

asyncData

非同期通信のグループ化
ベースはこんな感じ

<template>
  <div class="page">
  </div>
</template>

<script>
export default {
  asyncData () {
    return {}
  }
</script>

</div>

</template>

export default {

asyncData () {

return {}

}

</script>

axios

asyncDataは
あくまでもグループ化するだけなので
肝心の通信自体はaxiosで行います。

<template>
  <div class="page">
    {{ posts }}
  </div>
</template>

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

<style lang="scss" scoped>
.page {
}
</style>

</div>

</template>

export default {

asyncData ({ $axios }) {

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

return { posts }

}

</script>

.page {

}

</style>

Promise

ただこれだと、
axiosからデータが返ってくる前に、
空のデータを返してしまうことがあります。
それを防ぐためのPromise(await)

<template>
  <div class="page">
    {{ posts }}
  </div>
</template>

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

<style lang="scss" scoped>
.page {
}
</style>

</div>

</template>

export default {

async asyncData ({ $axios }) {

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

return { posts }

}

</script>

.page {

}

</style>

<template>
  <div class="page">
    {{ posts }}
  </div>
</template>

<script>
export default {
  asyncData ({ $axios }) {
    return $axios.$get('https://jsonplaceholder.typicode.com/posts')
      .then ((posts) => {
        return { posts }
      })
      .catch ((error)=> {
        console.log(error)
      })
  },
}
</script>

<style lang="scss" scoped>
.page {
}
</style>

</div>

</template>

export default {

asyncData ({ $axios }) {

return $axios.$get('https://jsonplaceholder.typicode.com/posts')

.then ((posts) => {

return { posts }

})

.catch ((error)=> {

console.log(error)

})

}

</script>

.page {

}

</style>

.thenの中で更に.thenを使いたい場合
tryとasync/awaitを使って
.thenで右にどんどんズレる現象を
なくしていくことも大事ですね

サンプルコード

asyncData, async/await, try, axios

<template>
  <div class="page">
    {{ posts }}
  </div>
</template>

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

<style lang="scss" scoped>
.page {
}
</style>

</div>

</template>

export default {

async asyncData ({ $axios }) {

try {

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

return { posts }

} catch (error) {

console.log(error)

}

</script>

.page {

}

</style>

fetch, async/await, axios

<template>
  <div class="page">
    {{ jsonData }}
  </div>
</template>

<script>
export default {
  computed: {
    jsonData () {
      return this.$store.getters['jsonData']
    },
  },
  async fetch ({ store, $axios }) {
    const data = await $axios.$get('https://jsonplaceholder.typicode.com/posts')
    store.commit('setData', data)
  },
}
</script>

<style lang="scss" scoped>
.page {
}
</style>

</div>

</template>

export default {

computed: {

jsonData () {

return this.$store.getters['jsonData']

async fetch ({ store, $axios }) {

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

store.commit('setData', data)

}

</script>

.page {

}

</style>

export const state = () => ({
  jsonData: [],
})

export const getters = {
  jsonData: state => {
    return state.jsonData
  },
}

export const mutations = {
  setData(state, data) {
    state.jsonData = data
  },
}

export const state = () => ({

jsonData: [],

})

export const getters = {

jsonData: state => {

return state.jsonData

}

export const mutations = {

setData(state, data) {

state.jsonData = data

}

まとめ

ややこしいですが
役割を理解するだけで
読み書きのしやすさが
だいぶ変わるかと思います