Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
nuxtjs-axios-error-handling
Search
odanado
PRO
February 03, 2020
Programming
0
260
nuxtjs-axios-error-handling
odanado
PRO
February 03, 2020
Tweet
Share
More Decks by odanado
See All by odanado
@nestjs/bull の活用について
odanado
PRO
0
1k
クラウド KMS の活用 / TOKYO BLOCKCHAIN TECH MEETUP 2022
odanado
PRO
0
830
Vue.observable で状態管理 / vue-observable-state-management
odanado
PRO
4
1.8k
ブロックチェーンアプリのトランザクションに対するデータ分析 / PyCon-JP-2019
odanado
PRO
0
290
スマートコントラクトに対する既知の攻撃とその対策 / bc.tokyo-21
odanado
PRO
0
170
最近のweb3.js事情 / bc.tokyo-19
odanado
PRO
2
410
YAPC::Tokyo 2019に スタッフ参加してみて / kichijojipm-18
odanado
PRO
1
2.1k
JavaScript + Dockerの知見 / knowledge-of-docker-in-javascript
odanado
PRO
9
53k
nuxt-i18nを使ったWebサイトの多言語化 / i18n-of-web-site-using-nuxt-i18n
odanado
PRO
1
6.2k
Other Decks in Programming
See All in Programming
Compose-View Interop in Practice (mDevCamp 2024)
stewemetal
0
160
CA.swift19 恋するAIアプリ開発の裏側
oskmr
0
380
Next.js App Router
quramy
11
1.5k
Milestoner
bkuhlmann
1
410
2 週間で Twitter Bot を作ってみた
contour_gara
0
740
Ruby Pattern Matching
bkuhlmann
0
930
初心者のためのRubyKaigi入門/RubyKaigi Introduction
a_matsuda
8
1.3k
CREってこういうこと? 体験入社 - 提案資料 - / what-is-cre-trial-employment
shinden
0
250
GitHub Copilotのススメ
marcy731
1
210
単体テストを書かない技術 #phpcon_odawara
o0h
PRO
27
8.4k
Apache Hive 4 on Treasure Data
ryukobayashi
0
400
Ruby Function Composition
bkuhlmann
1
340
Featured
See All Featured
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Navigating Team Friction
lara
179
13k
Design by the Numbers
sachag
274
18k
10 Git Anti Patterns You Should be Aware of
lemiorhan
649
58k
Adopting Sorbet at Scale
ufuk
69
8.6k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
11
1k
Practical Orchestrator
shlominoach
183
9.7k
Principles of Awesome APIs and How to Build Them.
keavy
121
16k
Building an army of robots
kneath
300
41k
Bash Introduction
62gerente
605
210k
Creatively Recalculating Your Daily Design Routine
revolveconf
211
11k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
275
13k
Transcript
@nuxtjs/axios で エラーハンドリング 1 @odan3240
タピオカLT • 初LT (2020年) :tada: 2
自己紹介 • @odan3240 • 株式会社モバイルファクトリー • 最近 ◦ AWS
周り ◦ TypeScript (frontend/backend) ◦ Vue.js 3
@nuxtjs/axios • axios ◦ JavaScript の HTTP クライアントライブラリ •
NuxtJS 向けの axios モジュール ◦ https://github.com/nuxt-community/axios-module 4
エラーハンドリングしたい • API リクエストでエラーが 発生したときにエラーページに飛ばすなどしたい ◦ 公式ドキュメントにあるサンプル ◦ レスポンスが 500
エラーだと /sorry にリダイレクト 5
リダイレクトじゃない挙動にしたい • 例えば ◦ トーストを出す ◦ ページ遷移せずエラーページを表示 • redirect
を呼び出さなければ良い? ◦ NuxtJS のエラーページが表示されてしまう ▪ 内部でエラーがハンドリングされているため ▪ https://github.com/nuxt-community/axios-module/issues/149 6
やりたいこと • 内部のエラーハンドリングをキャンセル • エラーが発生したことを NuxtJS に伝える 7
問題の切り分け • 内部のエラーハンドリングをキャンセル ◦ axios の話 • エラーが発生したことを NuxtJS
に伝える ◦ nuxtjs の話 8
エラーが発生したことを NuxtJS に伝える • NuxtJS の話 • error 関数を呼び出す ◦
https://ja.nuxtjs.org/api/context/ • Nuxt.js と axios のエラーハンドリング周りの話 ◦ https://mya-ake.com/slides/nuxt-axios-error-handling 9
内部のエラーハンドリングをキャンセル • axios でリクエストをキャンセルする方法はあるか? ◦ 「axios promise cancel response」あたりでググる ◦
https://github.com/axios/axios/issues/583 ◦ axios.interceptors.response.use で false を返せば良いっぽい 10
結論 11
まとめ • @nuxtjs/axios で独自のエラーを出す方法を紹介 • 問題を切り分けて立ち向かうの大事 ◦ モジュールの組み合わせで どんどん便利になっている時代なので
• 未解決の issue に解答を示したので 後の人が楽になったはず 12