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
350
nuxtjs-axios-error-handling
odanado
PRO
February 03, 2020
Tweet
Share
More Decks by odanado
See All by odanado
Vitest Browser Mode への期待 / Vitest Browser Mode
odanado
PRO
3
4.4k
@nestjs/bull の活用について
odanado
PRO
0
1.5k
クラウド KMS の活用 / TOKYO BLOCKCHAIN TECH MEETUP 2022
odanado
PRO
0
1.2k
Vue.observable で状態管理 / vue-observable-state-management
odanado
PRO
4
2k
ブロックチェーンアプリのトランザクションに対するデータ分析 / PyCon-JP-2019
odanado
PRO
0
420
スマートコントラクトに対する既知の攻撃とその対策 / bc.tokyo-21
odanado
PRO
0
240
最近のweb3.js事情 / bc.tokyo-19
odanado
PRO
2
500
YAPC::Tokyo 2019に スタッフ参加してみて / kichijojipm-18
odanado
PRO
1
2.3k
JavaScript + Dockerの知見 / knowledge-of-docker-in-javascript
odanado
PRO
9
54k
Other Decks in Programming
See All in Programming
コーディングは技術者(エンジニア)の嗜みでして / Learning the System Development Mindset from Rock Lady
mackey0225
2
570
Understanding Ruby Grammar Through Conflicts
yui_knk
1
120
モバイルアプリからWebへの横展開を加速した話_Claude_Code_実践術.pdf
kazuyasakamoto
0
260
CEDEC2025 長期運営ゲームをあと10年続けるための0から始める自動テスト ~4000項目を50%自動化し、月1→毎日実行にした3年間~
akatsukigames_tech
0
150
🔨 小さなビルドシステムを作る
momeemt
1
480
Oracle Database Technology Night 92 Database Connection control FAN-AC
oracle4engineer
PRO
1
180
ゲームの物理
fadis
5
1.5k
Jakarta EE Core Profile and Helidon - Speed, Simplicity, and AI Integration
ivargrimstad
0
190
開発チーム・開発組織の設計改善スキルの向上
masuda220
PRO
13
7.5k
AI時代のドメイン駆動設計-DDD実践におけるAI活用のあり方 / ddd-in-ai-era
minodriven
23
9k
「リーダーは意思決定する人」って本当?~ 学びを現場で活かす、リーダー4ヶ月目の試行錯誤 ~
marina1017
0
240
Honoアップデート 2025年夏
yusukebe
1
840
Featured
See All Featured
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
820
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
BBQ
matthewcrist
89
9.8k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Scaling GitHub
holman
462
140k
Building an army of robots
kneath
306
46k
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