どうもこんにちは!
だんだんと沖縄も寒くなってきて、そろそろ長袖の準備を始めました。
うみぶどうです!
今回は、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)の内容をコンソールに表示してみたところ・・・
Error: Network Error
at createError (createError.js?2d83:16)
at XMLHttpRequest.handleError (xhr.js?b50d:81)
と、エラー内容のみ表示。
このエラーが、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]);
}
引数objectが持つキーの一覧を、配列にして返す関数
おーぞろぞろと出てきましたね!
自分の環境だと、
config, request, response, isAxiosError, toJSON
の5つが出てきました!
そして、自分が欲しかったどのリクエストか判断する情報は、
ちゃんと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
コメント