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
290
nuxtjs-axios-error-handling
odanado
PRO
February 03, 2020
Tweet
Share
More Decks by odanado
See All by odanado
@nestjs/bull の活用について
odanado
PRO
0
1.2k
クラウド KMS の活用 / TOKYO BLOCKCHAIN TECH MEETUP 2022
odanado
PRO
0
970
Vue.observable で状態管理 / vue-observable-state-management
odanado
PRO
4
1.9k
ブロックチェーンアプリのトランザクションに対するデータ分析 / PyCon-JP-2019
odanado
PRO
0
330
スマートコントラクトに対する既知の攻撃とその対策 / bc.tokyo-21
odanado
PRO
0
200
最近のweb3.js事情 / bc.tokyo-19
odanado
PRO
2
440
YAPC::Tokyo 2019に スタッフ参加してみて / kichijojipm-18
odanado
PRO
1
2.2k
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.4k
Other Decks in Programming
See All in Programming
Kotlin Multiplatform at Stable and Beyond (Kotlin Vienna, October 2024)
zsmb
2
350
Повторное использование кода в ML: почему ML-пайплайны могут помочь?
lamodatech
0
150
タイミーにおけるデータの利用シーンと データ基盤の挑戦
marufeuille
4
3.2k
How to debug Xdebug... or any other weird bug in PHP
dunglas
1
470
デバッグの話 / Debugging for Beginners
kaityo256
PRO
6
460
2024-10-02 dev2next - Application Observability like you've never heard before
jonatan_ivanov
0
180
Pythonによるイベントソーシングへの挑戦と現状に対する考察 / Challenging Event Sourcing with Python and Reflections on the Current State
nrslib
3
1.2k
コードレビューと私の過去と未来
jxmtst
0
280
CSC509 Lecture 03
javiergs
PRO
0
140
Quarto Clean Theme
nicetak
0
220
5年分のツケを一気に払った話
soogie
3
1.3k
Beyond Laravel Octane - Hyperf for Laravel Artisans
albertcht
1
130
Featured
See All Featured
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
7.5k
How to Think Like a Performance Engineer
csswizardry
16
1k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
228
52k
Imperfection Machines: The Place of Print at Facebook
scottboms
264
13k
How to train your dragon (web standard)
notwaldorf
87
5.6k
In The Pink: A Labor of Love
frogandcode
139
22k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
Making Projects Easy
brettharned
115
5.9k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.2k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
25
660
YesSQL, Process and Tooling at Scale
rocio
167
14k
Scaling GitHub
holman
458
140k
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