$30 off During Our Annual Pro Sale. View Details »

nuxtjs-axios-error-handling

odanado
PRO
February 03, 2020

 nuxtjs-axios-error-handling

odanado
PRO

February 03, 2020
Tweet

More Decks by odanado

Other Decks in Programming

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