nuxtjs-axios-error-handling

00766b8e1f9c2665cf7fd29f9cf558df?s=47 odanado
February 03, 2020

 nuxtjs-axios-error-handling

00766b8e1f9c2665cf7fd29f9cf558df?s=128

odanado

February 03, 2020
Tweet

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