【Vue.js】エラーコードをcatch して条件分岐


はじめに

APIを叩き、例外が発生した際にcatchでエラーコードを取得する方法についてです。

今回は、取得するエラーコードによって表示するエラーメッセージを変える必要があり、catchでのエラーコード確認方法が分からなかったため、備忘録として残しておきます。

実装のゴール

エラーコードにより表示するメッセージを切り替える

  • emailが重複している場合
    エラーコード: record_invalid
    メッセージ: このメールアドレスはすでに登録されています。別のメールアドレスをご利用下さい。

  • 既に同じユーザーが登録されている場合
    エラーコード: already_exist_error
    メッセージ: 既に登録されています。

前提

  • email重複時はバリデーションエラーが返る
  • 同じユーザーが存在している場合には、API側で任意の例外を発生させている
class
    class AlreadyExistError < BadRequestError; end

    def create
        # paramsの値を使いユーザーを検索する処理を記述

        # 同じユーザーがいる場合に例外を発生させる
        raise AlreadyExistError if user

上記のようにすることで任意のエラーを返すことができる。

catchでエラーを補足

try {
   # APIを叩く
} catch (e) {
   # ここでエラーコードを取得
}

上記のようにcatchの引数に(e)を記述することで、e の中にエラーが格納される。

エラーコードで条件分岐

エラーコードを確認するには以下のようにすればよい。

try {
   # APIを叩く
} catch (e) {
    if (e.response.data.code === 'record_invalid') {
        store.dispatch(
          'snackbar/setMessage',
          'このメールアドレスはすでに登録されています。別のメールアドレスをご利用下さい。'
        )
        store.dispatch('snackbar/openError')
     } else if (e.response.data.code === 'already_exist_staff_error') {
        store.dispatch(
        'snackbar/setMessage',
          '既に登録されています。'
        )
        store.dispatch('snackbar/openError')
    } else {
        store.dispatch('snackbar/setMessage', '登録できませんでした')
        store.dispatch('snackbar/openError')
    }
}

これでフロントでエラーコードを取得して条件分岐させることができます。
分かってみれば簡単ですね。