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.1k
クラウド KMS の活用 / TOKYO BLOCKCHAIN TECH MEETUP 2022
odanado
PRO
0
910
Vue.observable で状態管理 / vue-observable-state-management
odanado
PRO
4
1.8k
ブロックチェーンアプリのトランザクションに対するデータ分析 / PyCon-JP-2019
odanado
PRO
0
310
スマートコントラクトに対する既知の攻撃とその対策 / bc.tokyo-21
odanado
PRO
0
190
最近のweb3.js事情 / bc.tokyo-19
odanado
PRO
2
420
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.3k
Other Decks in Programming
See All in Programming
3 Effective Rules for Success with Signals in Angular
manfredsteyer
PRO
0
120
DynamoDB コスト最適化っぽいことの基本 with Terraform
kuro_kurorrr
2
250
CSC307 Lecture 06
javiergs
PRO
0
360
Activities at Cairo Library
cairolibrary720
0
1.2k
企業向け生成AIアプリの 開発から得られた知見
takaakikakei
0
310
Trial
cairolibrary720
1
130
Rust.Nagoya #1
codemountains
0
170
GraphQL はいいぞ! ~Laravel で学ぶ GraphQL 入門~
azuki
1
160
Namespace on read
tagomoris
2
370
Ruby メモリ管理 プログラミング
megmogmog1965
0
130
Google's Recipe for Scaling (Web) Security – LocoMocoSec 2024
lweichselbaum
0
170
DDDを志して3年経ったら「DDDの皮を被ったクリーンアーキテクチャ」になった話【デブサミ2024夏】
texmeijin
1
620
Featured
See All Featured
Web Components: a chance to create the future
zenorocha
307
41k
From Idea to $5000 a Month in 5 Months
shpigford
377
46k
Imperfection Machines: The Place of Print at Facebook
scottboms
262
13k
A better future with KSS
kneath
231
17k
A designer walks into a library…
pauljervisheath
201
24k
Six Lessons from altMBA
skipperchong
24
3.2k
The Illustrated Children's Guide to Kubernetes
chrisshort
39
47k
Side Projects
sachag
451
42k
The Cost Of JavaScript in 2023
addyosmani
31
4.7k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
353
29k
Clear Off the Table
cherdarchuk
89
320k
Fantastic passwords and where to find them - at NoRuKo
philnash
42
2.7k
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