コンパイラかく語りき

import { Fun } from 'programming'

【Vue.js】Nuxt.js の AsyncData 関数にて、リダイレクト等のエラーハンドルを行う

概要

Nuxt.js アプリケーションにおいてサーバサイドでデータフェッチをする場合、 AsyncData 関数を使う方は多いと思います。

この記事では、「もしデータフェッチに失敗したら XX する」のような処理を書く方法について。

Nuxt.js v2.9.0 時点での情報になります。

context.error 関数を呼ぶ

AsyncData は引数に context をとります。context には params の他にも、error という関数が渡ってきます。

error 関数を実行すると、エラーレイアウトにリダイレクトさせることができます。引数としては statusmessage を渡すことができます。

Nuxt.js adds the error(params) method in the context, which you can call to display the error page. 
params.statusCode will be also used to render the proper status code from the server-side.

Async Data #Handling Errors - nuxtjs.org

エラーレイアウトについては、こちらが公式ドキュメントの該当ページになります。

サンプルコード

export default {
  asyncData ({ params, error }) {
    return axios.get(`https://my-api/posts/${params.id}`)
    .then((res) => {
      return { title: res.data.title }
    })
    .catch((e) => {
      error({ statusCode: 404, message: 'Post not found' })
      // 404 ステータスコード と "Post not found" エラーメッセージをもたせる
    })
  }
}

Async Data #Handling Errors - nuxtjs.org

おしまい

以上、Nuxt.js の AsyncData 関数にて、リダイレクト等のエラーハンドルを行う方法でした。 とは言え、公式のドキュメントに書いてあるとおりですが…。