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.3k
@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
410
スマートコントラクトに対する既知の攻撃とその対策 / bc.tokyo-21
odanado
PRO
0
230
最近の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
リッチエディターを安全に開発・運用するために
unachang113
1
350
AIコーディングエージェント全社導入とセキュリティ対策
hikaruegashira
16
9.3k
TypeScriptでDXを上げろ! Hono編
yusukebe
4
930
リバースエンジニアリング新時代へ! GhidraとClaude DesktopをMCPで繋ぐ/findy202507
tkmru
7
1.7k
一人でAIプロダクトを作るならAIにはもっと働いてもらいたい / I want AI to work harder
rkaga
3
260
Quality Gates in the Age of Agentic Coding
helmedeiros
PRO
1
120
QA x AIエコシステム段階構築作戦
osu
0
240
kiroでゲームを作ってみた
iriikeita
0
140
あまり知られていない MCP 仕様たち / MCP specifications that aren’t widely known
ktr_0731
0
220
What's new in Adaptive Android development
fornewid
0
130
AIのメモリー
watany
12
1.2k
SQLアンチパターン第2版 データベースプログラミングで陥りがちな失敗とその対策 / Intro to SQL Antipatterns 2nd
twada
PRO
36
11k
Featured
See All Featured
Side Projects
sachag
455
43k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Designing for Performance
lara
610
69k
A designer walks into a library…
pauljervisheath
207
24k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
For a Future-Friendly Web
brad_frost
179
9.9k
4 Signs Your Business is Dying
shpigford
184
22k
Mobile First: as difficult as doing things right
swwweet
223
9.9k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
[RailsConf 2023] Rails as a piece of cake
palkan
56
5.7k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Testing 201, or: Great Expectations
jmmastey
45
7.6k
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