【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')
    }
}

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