Nuxt: created() でエラーハンドリング

Question

実現したいこと

Nuxtでcreated()を使い、APIを取得しています。
エラーレスポンスを取得した時にlayouts/error.vueで作成したエラーページを表示させたいのですが、上手くいっておりません。

ソースコード

async created() {
    const id = this.$route.query.article
    const url = '/api/hoge/' + id
    await this.$axios
      .get(url)
      .then(res => {
        this.article = res.data
      })
      .catch(err => {
        // console.log(err.response)
        // return err.response
      })
  }

知識不足で恐縮ですが、ご教示いただけますと幸いです。
よろしくお願いいたします。

Answer 1

async awaitを使うのであれば、then/catchは不要なのでは?

• https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Using_promises
• https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/async_function

async created() {
    const id = this.$route.query.article
    const url = '/api/hoge/' + id
    try {
        const res = await this.$axios.get(url)
        this.article = res.data
    } catch(err) {
        console.log(err.response)
        return err.response
    }
}