【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')
}
}
これでフロントでエラーコードを取得して条件分岐させることができます。
分かってみれば簡単ですね。
Author And Source
この問題について(【Vue.js】エラーコードをcatch して条件分岐), 我々は、より多くの情報をここで見つけました https://qiita.com/riku103/items/4c8a7260e37ff3bc3667著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .