nuxtjs-axios-error-handling

Transcript

1. @nuxtjs/axios で

   エラーハンドリング

   1

   @odan3240

   

   View Slide

2. タピオカLT

   ● 初LT (2020年) :tada:

   2

   

   View Slide

3. 自己紹介

   ● @odan3240

   ● 株式会社モバイルファクトリー

   

   ● 最近

   ○ AWS 周り

   ○ TypeScript (frontend/backend)

   ○ Vue.js

   3

   

   View Slide

4. @nuxtjs/axios

   ● axios

   ○ JavaScript の HTTP クライアントライブラリ

   

   ● NuxtJS 向けの axios モジュール

   ○ https://github.com/nuxt-community/axios-module

   

   

   4

   

   View Slide

5. エラーハンドリングしたい

   ● API リクエストでエラーが

   発生したときにエラーページに飛ばすなどしたい

   ○ 公式ドキュメントにあるサンプル

   ○ レスポンスが 500 エラーだと /sorry にリダイレクト

   5

   

   View Slide

6. リダイレクトじゃない挙動にしたい

   ● 例えば

   ○ トーストを出す

   ○ ページ遷移せずエラーページを表示

   

   ● redirect を呼び出さなければ良い？

   ○ NuxtJS のエラーページが表示されてしまう

   ■ 内部でエラーがハンドリングされているため

   ■ https://github.com/nuxt-community/axios-module/issues/149

   

   

   6

   

   View Slide

7. やりたいこと

   ● 内部のエラーハンドリングをキャンセル

   ● エラーが発生したことを NuxtJS に伝える

   

   7

   

   View Slide

8. 問題の切り分け

   ● 内部のエラーハンドリングをキャンセル

   ○ axios の話

   

   ● エラーが発生したことを NuxtJS に伝える

   ○ nuxtjs の話

   

   8

   

   View Slide

9. エラーが発生したことを NuxtJS に伝える

   ● NuxtJS の話

   ● error 関数を呼び出す

   ○ https://ja.nuxtjs.org/api/context/

   ● Nuxt.js と axios のエラーハンドリング周りの話

   ○ https://mya-ake.com/slides/nuxt-axios-error-handling

   

   9

   

   View Slide

10. 内部のエラーハンドリングをキャンセル

    ● axios でリクエストをキャンセルする方法はあるか？

    ○ 「axios promise cancel response」あたりでググる

    ○ https://github.com/axios/axios/issues/583

    ○ axios.interceptors.response.use で

    false を返せば良いっぽい

    10

    

    View Slide

11. 結論

    11

    

    View Slide

12. まとめ

    ● @nuxtjs/axios で独自のエラーを出す方法を紹介

    

    ● 問題を切り分けて立ち向かうの大事

    ○ モジュールの組み合わせで

    どんどん便利になっている時代なので

    

    ● 未解決の issue に解答を示したので

    後の人が楽になったはず

    12

    

    View Slide