0
Help us understand the problem. What are the problem?

posted at

axiosでエラーにもレスポンスを表示させる方法

今回の目的

axiosでエラーのときでも、エラーのレスポンスを表示できたら嬉しいですよね!ってことで紹介します。
知っている人も多いかもしれませんが、自分の知識の定着として書きます!

今までの自分のエラー表示

index.js
this.$axios.$post('postするときのURL')
.then((res)=>{
  console.log('RESPONSE',res)
})
.cacth((error)=>{
  console.log('ERROR',error)
})

こんな感じで書いていました。
スクリーンショット 2022-06-09 10.03.56.png

こんな感じで400なので、フロントのミスということはわかりますが、具体的に何が悪いのか?が分かりにくいですよね。

改善したエラー表示

index.js
this.$axios.$post('postするときのURL')
.then((res)=>{
  console.log('RESPONSE',res)
})
.cacth((error)=>{
  console.log('ERROR',error.response.data
)
})

スクリーンショット 2022-06-09 10.05.46.png

すると、こんな感じで具体的なメッセージがきて分かりやすく、表示されてどうしたらいいのかが分かりやすくなりました!
これを知った時は、感動しましたww

最後に

自分みたいにエラー内容が分かりにくくて、苦しんでいる人が少なくなればと思います。

Register as a new user and use Qiita more conveniently

  1. You can follow users and tags
  2. you can stock useful information
  3. You can make editorial suggestions for articles
What you can do with signing up
0
Help us understand the problem. What are the problem?