@nuxtjs/axios で エラーハンドリング 1 @odan3240
View Slide
タピオカ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