nuxtjs-axios-error-handling

Transcript

1. @nuxtjs/axios で
 エラーハンドリング
 1
 @odan3240


2. タピオカLT
 • 初LT (2020年) :tada:
 2


3. 自己紹介
 • @odan3240
 • 株式会社モバイルファクトリー
 
 • 最近
 ◦ AWS

   周り
 ◦ TypeScript (frontend/backend)
 ◦ Vue.js
 3


4. @nuxtjs/axios
 • axios
 ◦ JavaScript の HTTP クライアントライブラリ
 
 •

   NuxtJS 向けの axios モジュール
 ◦ https://github.com/nuxt-community/axios-module
 
 
 4


5. エラーハンドリングしたい
 • API リクエストでエラーが
 発生したときにエラーページに飛ばすなどしたい
 ◦ 公式ドキュメントにあるサンプル
 ◦ レスポンスが 500

   エラーだと /sorry にリダイレクト
 5


6. リダイレクトじゃない挙動にしたい
 • 例えば
 ◦ トーストを出す
 ◦ ページ遷移せずエラーページを表示
 
 • redirect

   を呼び出さなければ良い？
 ◦ NuxtJS のエラーページが表示されてしまう
 ▪ 内部でエラーがハンドリングされているため
 ▪ https://github.com/nuxt-community/axios-module/issues/149
 
 
 6


7. やりたいこと
 • 内部のエラーハンドリングをキャンセル
 • エラーが発生したことを NuxtJS に伝える
 
 7


8. 問題の切り分け
 • 内部のエラーハンドリングをキャンセル
 ◦ axios の話
 
 • エラーが発生したことを NuxtJS

   に伝える
 ◦ nuxtjs の話
 
 8


9. エラーが発生したことを NuxtJS に伝える
 • NuxtJS の話
 • error 関数を呼び出す
 ◦

   https://ja.nuxtjs.org/api/context/
 • Nuxt.js と axios のエラーハンドリング周りの話
 ◦ https://mya-ake.com/slides/nuxt-axios-error-handling
 
 9


10. 内部のエラーハンドリングをキャンセル
 • axios でリクエストをキャンセルする方法はあるか？
 ◦ 「axios promise cancel response」あたりでググる
 ◦

    https://github.com/axios/axios/issues/583
 ◦ axios.interceptors.response.use で
 false を返せば良いっぽい
 10


11. 結論
 11


12. まとめ
 • @nuxtjs/axios で独自のエラーを出す方法を紹介
 
 • 問題を切り分けて立ち向かうの大事
 ◦ モジュールの組み合わせで
 どんどん便利になっている時代なので


    
 • 未解決の issue に解答を示したので
 後の人が楽になったはず
 12