Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
nuxtjs-axios-error-handling
odanado
February 03, 2020
Programming
0
98
nuxtjs-axios-error-handling
odanado
February 03, 2020
Tweet
Share
More Decks by odanado
See All by odanado
odanado
4
650
odanado
0
200
odanado
0
69
odanado
2
260
odanado
1
1.6k
odanado
10
48k
odanado
1
4.6k
odanado
0
74
odanado
3
4.4k
Other Decks in Programming
See All in Programming
konstantin_diener
0
130
christianweyer
PRO
0
270
danilop
0
220
rinyudrvo
1
130
pirosikick
4
930
legalforce
PRO
0
600
mackee
0
500
suzukiot
0
250
manfredsteyer
PRO
0
230
amaotone
15
7.8k
pyama86
4
410
mitohato14
0
110
Featured
See All Featured
qrush
285
19k
philhawksworth
190
17k
jponch
103
5k
eitanlees
112
10k
geeforr
332
29k
mza
80
4.1k
bkeepers
321
53k
rmw
11
810
thoeni
4
590
garrettdimon
287
110k
samlambert
237
10k
kneath
219
15k
Transcript
@nuxtjs/axios で エラーハンドリング 1 @odan3240
タピオカLT • 初LT (2020年) :tada: 2
自己紹介 • @odan3240 • 株式会社モバイルファクトリー • 最近 ◦ AWS
周り ◦ TypeScript (frontend/backend) ◦ Vue.js 3
@nuxtjs/axios • axios ◦ JavaScript の HTTP クライアントライブラリ •
NuxtJS 向けの axios モジュール ◦ https://github.com/nuxt-community/axios-module 4
エラーハンドリングしたい • API リクエストでエラーが 発生したときにエラーページに飛ばすなどしたい ◦ 公式ドキュメントにあるサンプル ◦ レスポンスが 500
エラーだと /sorry にリダイレクト 5
リダイレクトじゃない挙動にしたい • 例えば ◦ トーストを出す ◦ ページ遷移せずエラーページを表示 • redirect
を呼び出さなければ良い? ◦ NuxtJS のエラーページが表示されてしまう ▪ 内部でエラーがハンドリングされているため ▪ https://github.com/nuxt-community/axios-module/issues/149 6
やりたいこと • 内部のエラーハンドリングをキャンセル • エラーが発生したことを NuxtJS に伝える 7
問題の切り分け • 内部のエラーハンドリングをキャンセル ◦ axios の話 • エラーが発生したことを NuxtJS
に伝える ◦ nuxtjs の話 8
エラーが発生したことを NuxtJS に伝える • NuxtJS の話 • error 関数を呼び出す ◦
https://ja.nuxtjs.org/api/context/ • Nuxt.js と axios のエラーハンドリング周りの話 ◦ https://mya-ake.com/slides/nuxt-axios-error-handling 9
内部のエラーハンドリングをキャンセル • axios でリクエストをキャンセルする方法はあるか? ◦ 「axios promise cancel response」あたりでググる ◦
https://github.com/axios/axios/issues/583 ◦ axios.interceptors.response.use で false を返せば良いっぽい 10
結論 11
まとめ • @nuxtjs/axios で独自のエラーを出す方法を紹介 • 問題を切り分けて立ち向かうの大事 ◦ モジュールの組み合わせで どんどん便利になっている時代なので
• 未解決の issue に解答を示したので 後の人が楽になったはず 12