Tweet
Tweet

Slide 1

Slide 1 text

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


Slide 2

Slide 2 text

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


Slide 3

Slide 3 text

自己紹介
 ● @odan3240
 ● 株式会社モバイルファクトリー
 
 ● 最近
 ○ AWS 周り
 ○ TypeScript (frontend/backend)
 ○ Vue.js
 3


Slide 4

Slide 4 text

@nuxtjs/axios
 ● axios
 ○ JavaScript の HTTP クライアントライブラリ
 
 ● NuxtJS 向けの axios モジュール
 ○ https://github.com/nuxt-community/axios-module
 
 
 4


Slide 5

Slide 5 text

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


Slide 6

Slide 6 text

リダイレクトじゃない挙動にしたい
 ● 例えば
 ○ トーストを出す
 ○ ページ遷移せずエラーページを表示
 
 ● redirect を呼び出さなければ良い？
 ○ NuxtJS のエラーページが表示されてしまう
 ■ 内部でエラーがハンドリングされているため
 ■ https://github.com/nuxt-community/axios-module/issues/149
 
 
 6


Slide 7

Slide 7 text

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


Slide 8

Slide 8 text

問題の切り分け
 ● 内部のエラーハンドリングをキャンセル
 ○ axios の話
 
 ● エラーが発生したことを NuxtJS に伝える
 ○ nuxtjs の話
 
 8


Slide 9

Slide 9 text

エラーが発生したことを NuxtJS に伝える
 ● NuxtJS の話
 ● error 関数を呼び出す
 ○ https://ja.nuxtjs.org/api/context/
 ● Nuxt.js と axios のエラーハンドリング周りの話
 ○ https://mya-ake.com/slides/nuxt-axios-error-handling
 
 9


Slide 10

Slide 10 text

内部のエラーハンドリングをキャンセル
 ● axios でリクエストをキャンセルする方法はあるか？
 ○ 「axios promise cancel response」あたりでググる
 ○ https://github.com/axios/axios/issues/583
 ○ axios.interceptors.response.use で
 false を返せば良いっぽい
 10


Slide 11

Slide 11 text

結論
 11


Slide 12

Slide 12 text

まとめ
 ● @nuxtjs/axios で独自のエラーを出す方法を紹介
 
 ● 問題を切り分けて立ち向かうの大事
 ○ モジュールの組み合わせで
 どんどん便利になっている時代なので
 
 ● 未解決の issue に解答を示したので
 後の人が楽になったはず
 12