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
280
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
950
Vue.observable で状態管理 / vue-observable-state-management
odanado
PRO
4
1.9k
ブロックチェーンアプリのトランザクションに対するデータ分析 / PyCon-JP-2019
odanado
PRO
0
330
スマートコントラクトに対する既知の攻撃とその対策 / bc.tokyo-21
odanado
PRO
0
190
最近のweb3.js事情 / bc.tokyo-19
odanado
PRO
2
430
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.4k
Other Decks in Programming
See All in Programming
仮想ファイルシステムを導入して開発環境のストレージ課題を解消する
segadevtech
2
550
Findy - エンジニア向け会社紹介 / Findy Letter for Engineers
findyinc
4
90k
事業フェーズの変化に対応する 開発生産性向上のゼロイチ
masaygggg
0
200
いつか使える ObjectSpace / Maybe useful ObjectSpace
euglena1215
2
140
From Idea to IDE: Developing Plugins for Android Studio
thisaay
1
220
rbs-inlineを導入してYARDからRBSに移行する
euglena1215
1
290
長期運用プロダクトの開発速度を維持し続けるためのリファクタリング実践例
wataruss
8
2.7k
Perl 5 OOP機構30年史 - Perl 5's OOP Mechanism over the past 30 years
moznion
0
350
GenU導入でCDKに初挑戦し、悪戦苦闘した話
hideg
0
170
Lessons by WebAssembly app in production on CDN Edge Computing Service
tetsuharuohzeki
0
210
A New Era of Testing
mannodermaus
2
510
Swiftコードバトル必勝法
toshi0383
0
170
Featured
See All Featured
Code Review Best Practice
trishagee
62
16k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
0
120
Product Roadmaps are Hard
iamctodd
PRO
48
10k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.4k
The Pragmatic Product Professional
lauravandoore
31
6.2k
A designer walks into a library…
pauljervisheath
201
24k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.3k
A Tale of Four Properties
chriscoyier
155
22k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
190
16k
Gamification - CAS2011
davidbonilla
79
5k
How GitHub (no longer) Works
holman
310
140k
Become a Pro
speakerdeck
PRO
22
4.9k
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