[vue]axiosでの並列リクエスト時にエラーが発生した場合のエラー情報取得方法

どうもこんにちは！
だんだんと沖縄も寒くなってきて、そろそろ長袖の準備を始めました。
うみぶどうです！

今回は、vue.jsでaxiosを使用する際に、
並列リクエストをするとエラーが発生した時にどのリクエストでエラーが発生しているか
を判別するのに結構苦労したので、その方法を共有したいと思います！

エラー情報は取得できるが、どのリクエストか判別出来ない！？

vue.jsでaxiosを使って並列リクエストをしている際にエラーハンドリングをしたくて、
こんな感じのプログラムを書いていました。

const posts = [
  {
    id: "0",
    title: "うみぶどうの日常"
  },
  {
    id: "1",
    title: "うみぶどうの冒険"
  },
  {
    id: "2",
    title: "うみぶどうの戸惑い"
  }
];

for(let i = 0; i < posts.length; i++) {
  this.$axios.post('https://~~~~/', posts[i])
  .then(res=>{
    //成功した時の処理
    console.log(res);
  })
  .catch(error=>{
    //失敗した時の処理
    console.log(error);
  })
}

エラー情報が取得できるが・・・

このプログラムでaxiosでのリクエストでエラーが発生した際には、
.catch(error=>{})のブロックが実行されてエラー情報は取得できるのですが、
エラー(error)の内容をコンソールに表示してみたところ・・・

と、エラー内容のみ表示。
このエラーが、id1なのか2なのか3なのか、どのリクエストで発生したものなのかわかりません！

errorから情報取れるかと思いきや、コンソールにerrorが所持するメソッドやプロパティも表示されず・・・

catchの第一引数は一応オブジェクト

調べてみると、どうやらこのcatchの第一引数、ただの文字例ではないみたいです。

とえあえず、typeof()で調べてみます。

console.log(typeof(error));    //object

無事にobjectと表示されまして、一安心。笑

catchの第一引数の持つ情報

次にこの第一引数、errorがどんな情報をもっているか調べてみます。
console.log()しただけでは見れないので、
まずはオブジェクトの持つキーを調べてから、その内容を表示してみます。

for(let key of Object.keys(error)) {
  console.log(key);
  console.log(error[key]);
}

おーぞろぞろと出てきましたね！

自分の環境だと、
config, request, response, isAxiosError, toJSON
の５つが出てきました！

そして、自分が欲しかったどのリクエストか判断する情報は、
ちゃんとconfigの中に入っていました！

configの内容

error.configの中には、axiosを使ってリクエストした際の情報が入っています。
post, get等のリクエストの種類や、リクエストボディ等の情報が取得できます。

requestの内容

こちらはaxiosでリクエストした際のXMLHttpRequestが入っています。

responseの内容

こちらには帰ってきたレスポンスの内容が入っています。
自分のケースの場合はレスポンスを返す前にエラーが発生していたので、undefinedとなっていました。

isAxiosErrorの内容

名前から察するに、axiosで起こったエラーがどうかがboolean形式で入っていると思われます。
catchのブロックが実行されるのは、axiosによるエラーでない場合も含まれるので、
その辺りの判断に使われるものだと思われます。

toJSONの内容

こちらはエラーの内容をJSON形式にして返す関数となります。

並列リクエスト時にエラーの発生したリクエストを判別する方法

エラー情報からリクエスト時の情報を取り出す事が出来たので、
これで無事にリクエストを判別する事ができるようになりました！

.catch(error=>{
  //失敗した時の処理
  const errorId = error.config.data.id;  //エラー発生したリクエストの記事ID
})

同じようにaxiosでの並列リクエスト時のエラー処理、エラーハンドリングに困っている人や、
こうゆう時のオブジェクトの持つデータの調べ方等、参考にして頂ければ幸いです。

まとめ

いや、公式ドキュメント見ろよと言われればそれで終わりなのですが・・・(T_T)

仕事ではなく趣味としてやっているので許して下さいm(_ _)m