Enviar pesquisa
Carregar
fetch APIを安全に使う方法をおさらいしてみよう
•
Transferir como PPTX, PDF
•
0 gostou
•
429 visualizações
iPride Co., Ltd.
Seguir
2023/2/3の勉強会で発表されたものです。
Leia menos
Leia mais
Tecnologia
Vista de apresentação de diapositivos
Denunciar
Compartilhar
Vista de apresentação de diapositivos
Denunciar
Compartilhar
1 de 29
Baixar agora
Recomendados
ReactでuseEffect()を減らしたい話
ReactでuseEffect()を減らしたい話
iPride Co., Ltd.
マイクロサービスにおける非同期アーキテクチャ
マイクロサービスにおける非同期アーキテクチャ
ota42y
SpringBootTest入門
SpringBootTest入門
Yahoo!デベロッパーネットワーク
Supabase Edge Functions と Netlify Edge Functions を使ってみる – 機能とその比較 –
Supabase Edge Functions と Netlify Edge Functions を使ってみる – 機能とその比較 –
虎の穴 開発室
トランザクションスクリプトのすすめ
トランザクションスクリプトのすすめ
pospome
GraphQLのsubscriptionで出来ること
GraphQLのsubscriptionで出来ること
Shingo Fukui
メタプログラミングって何だろう
メタプログラミングって何だろう
Kota Mizushima
他社製品と比較した際のAuth0のいいところ
他社製品と比較した際のAuth0のいいところ
Satoshi Takayanagi
Recomendados
ReactでuseEffect()を減らしたい話
ReactでuseEffect()を減らしたい話
iPride Co., Ltd.
マイクロサービスにおける非同期アーキテクチャ
マイクロサービスにおける非同期アーキテクチャ
ota42y
SpringBootTest入門
SpringBootTest入門
Yahoo!デベロッパーネットワーク
Supabase Edge Functions と Netlify Edge Functions を使ってみる – 機能とその比較 –
Supabase Edge Functions と Netlify Edge Functions を使ってみる – 機能とその比較 –
虎の穴 開発室
トランザクションスクリプトのすすめ
トランザクションスクリプトのすすめ
pospome
GraphQLのsubscriptionで出来ること
GraphQLのsubscriptionで出来ること
Shingo Fukui
メタプログラミングって何だろう
メタプログラミングって何だろう
Kota Mizushima
他社製品と比較した際のAuth0のいいところ
他社製品と比較した際のAuth0のいいところ
Satoshi Takayanagi
REST API のコツ
REST API のコツ
pospome
やはりお前らのMVCは間違っている
やはりお前らのMVCは間違っている
Koichi Tanaka
Unified JVM Logging
Unified JVM Logging
Yuji Kubota
Spring Boot × Vue.jsでSPAを作る
Spring Boot × Vue.jsでSPAを作る
Go Miyasaka
これからSpringを使う開発者が知っておくべきこと
これからSpringを使う開発者が知っておくべきこと
土岐 孝平
社内でアジャイルと出会った新卒2年目がインフラ部隊でタスク可視化をやってみた話
社内でアジャイルと出会った新卒2年目がインフラ部隊でタスク可視化をやってみた話
Masayuki Ueda
AWS Black Belt Online Seminar 2016 AWS CloudFormation
AWS Black Belt Online Seminar 2016 AWS CloudFormation
Amazon Web Services Japan
JVMのGCアルゴリズムとチューニング
JVMのGCアルゴリズムとチューニング
佑哉 廣岡
【DL輪読会】Llama 2: Open Foundation and Fine-Tuned Chat Models
【DL輪読会】Llama 2: Open Foundation and Fine-Tuned Chat Models
Deep Learning JP
FIWARE Big Data Ecosystem : Cygnus and STH Comet
FIWARE Big Data Ecosystem : Cygnus and STH Comet
fisuda
爆速クエリエンジン”Presto”を使いたくなる話
爆速クエリエンジン”Presto”を使いたくなる話
Kentaro Yoshida
DockerコンテナでGitを使う
DockerコンテナでGitを使う
Kazuhiro Suga
心理的安全性を 0から80ぐらいに上げた話
心理的安全性を 0から80ぐらいに上げた話
Yusuke Hisatsu
Swaggerでのapi開発よもやま話
Swaggerでのapi開発よもやま話
KEISUKE KONISHI
さくっと理解するSpring bootの仕組み
さくっと理解するSpring bootの仕組み
Takeshi Ogawa
macOSの仮想化技術について ~Virtualization-rs Rust bindings for virtualization.framework ~
macOSの仮想化技術について ~Virtualization-rs Rust bindings for virtualization.framework ~
NTT Communications Technology Development
Tensorflow Liteの量子化アーキテクチャ
Tensorflow Liteの量子化アーキテクチャ
HitoshiSHINABE1
目grep入門 +解説
目grep入門 +解説
murachue
PostgreSQLクエリ実行の基礎知識 ~Explainを読み解こう~
PostgreSQLクエリ実行の基礎知識 ~Explainを読み解こう~
Miki Shimogai
PHPからgoへの移行で分かったこと
PHPからgoへの移行で分かったこと
gree_tech
Phpでrest apiを作った話
Phpでrest apiを作った話
Yamaguchi Kenya
PHP x AWS でスケーラブルなシステムをつくろう
PHP x AWS でスケーラブルなシステムをつくろう
Taiji INOUE
Mais conteúdo relacionado
Mais procurados
REST API のコツ
REST API のコツ
pospome
やはりお前らのMVCは間違っている
やはりお前らのMVCは間違っている
Koichi Tanaka
Unified JVM Logging
Unified JVM Logging
Yuji Kubota
Spring Boot × Vue.jsでSPAを作る
Spring Boot × Vue.jsでSPAを作る
Go Miyasaka
これからSpringを使う開発者が知っておくべきこと
これからSpringを使う開発者が知っておくべきこと
土岐 孝平
社内でアジャイルと出会った新卒2年目がインフラ部隊でタスク可視化をやってみた話
社内でアジャイルと出会った新卒2年目がインフラ部隊でタスク可視化をやってみた話
Masayuki Ueda
AWS Black Belt Online Seminar 2016 AWS CloudFormation
AWS Black Belt Online Seminar 2016 AWS CloudFormation
Amazon Web Services Japan
JVMのGCアルゴリズムとチューニング
JVMのGCアルゴリズムとチューニング
佑哉 廣岡
【DL輪読会】Llama 2: Open Foundation and Fine-Tuned Chat Models
【DL輪読会】Llama 2: Open Foundation and Fine-Tuned Chat Models
Deep Learning JP
FIWARE Big Data Ecosystem : Cygnus and STH Comet
FIWARE Big Data Ecosystem : Cygnus and STH Comet
fisuda
爆速クエリエンジン”Presto”を使いたくなる話
爆速クエリエンジン”Presto”を使いたくなる話
Kentaro Yoshida
DockerコンテナでGitを使う
DockerコンテナでGitを使う
Kazuhiro Suga
心理的安全性を 0から80ぐらいに上げた話
心理的安全性を 0から80ぐらいに上げた話
Yusuke Hisatsu
Swaggerでのapi開発よもやま話
Swaggerでのapi開発よもやま話
KEISUKE KONISHI
さくっと理解するSpring bootの仕組み
さくっと理解するSpring bootの仕組み
Takeshi Ogawa
macOSの仮想化技術について ~Virtualization-rs Rust bindings for virtualization.framework ~
macOSの仮想化技術について ~Virtualization-rs Rust bindings for virtualization.framework ~
NTT Communications Technology Development
Tensorflow Liteの量子化アーキテクチャ
Tensorflow Liteの量子化アーキテクチャ
HitoshiSHINABE1
目grep入門 +解説
目grep入門 +解説
murachue
PostgreSQLクエリ実行の基礎知識 ~Explainを読み解こう~
PostgreSQLクエリ実行の基礎知識 ~Explainを読み解こう~
Miki Shimogai
PHPからgoへの移行で分かったこと
PHPからgoへの移行で分かったこと
gree_tech
Mais procurados
(20)
REST API のコツ
REST API のコツ
やはりお前らのMVCは間違っている
やはりお前らのMVCは間違っている
Unified JVM Logging
Unified JVM Logging
Spring Boot × Vue.jsでSPAを作る
Spring Boot × Vue.jsでSPAを作る
これからSpringを使う開発者が知っておくべきこと
これからSpringを使う開発者が知っておくべきこと
社内でアジャイルと出会った新卒2年目がインフラ部隊でタスク可視化をやってみた話
社内でアジャイルと出会った新卒2年目がインフラ部隊でタスク可視化をやってみた話
AWS Black Belt Online Seminar 2016 AWS CloudFormation
AWS Black Belt Online Seminar 2016 AWS CloudFormation
JVMのGCアルゴリズムとチューニング
JVMのGCアルゴリズムとチューニング
【DL輪読会】Llama 2: Open Foundation and Fine-Tuned Chat Models
【DL輪読会】Llama 2: Open Foundation and Fine-Tuned Chat Models
FIWARE Big Data Ecosystem : Cygnus and STH Comet
FIWARE Big Data Ecosystem : Cygnus and STH Comet
爆速クエリエンジン”Presto”を使いたくなる話
爆速クエリエンジン”Presto”を使いたくなる話
DockerコンテナでGitを使う
DockerコンテナでGitを使う
心理的安全性を 0から80ぐらいに上げた話
心理的安全性を 0から80ぐらいに上げた話
Swaggerでのapi開発よもやま話
Swaggerでのapi開発よもやま話
さくっと理解するSpring bootの仕組み
さくっと理解するSpring bootの仕組み
macOSの仮想化技術について ~Virtualization-rs Rust bindings for virtualization.framework ~
macOSの仮想化技術について ~Virtualization-rs Rust bindings for virtualization.framework ~
Tensorflow Liteの量子化アーキテクチャ
Tensorflow Liteの量子化アーキテクチャ
目grep入門 +解説
目grep入門 +解説
PostgreSQLクエリ実行の基礎知識 ~Explainを読み解こう~
PostgreSQLクエリ実行の基礎知識 ~Explainを読み解こう~
PHPからgoへの移行で分かったこと
PHPからgoへの移行で分かったこと
Semelhante a fetch APIを安全に使う方法をおさらいしてみよう
Phpでrest apiを作った話
Phpでrest apiを作った話
Yamaguchi Kenya
PHP x AWS でスケーラブルなシステムをつくろう
PHP x AWS でスケーラブルなシステムをつくろう
Taiji INOUE
マッシュアップ勉強会
マッシュアップ勉強会
guestadcb01
マッシュアップ勉強会
マッシュアップ勉強会
seiryo
WebAPIではじめるphp入門
WebAPIではじめるphp入門
Hiroaki Murayama
ASP.NET WEB API 開発体験
ASP.NET WEB API 開発体験
miso- soup3
オフラインファーストの思想と実践
オフラインファーストの思想と実践
Shumpei Shiraishi
PHPという概念が存在しない退屈な世界 - AWS LambdaでWebAPP編
PHPという概念が存在しない退屈な世界 - AWS LambdaでWebAPP編
Yoshihiro Ohsuka
Google App EngineでTwitterアプリを作ろう
Google App EngineでTwitterアプリを作ろう
kenji4569
WebAPI20230326.pdf
WebAPI20230326.pdf
RyoArakaki1
Apilecture for 2014/02/22 at shannonlab
Apilecture for 2014/02/22 at shannonlab
Yutaka Kobayshi
エンジニアのための勉強会 #3 『RESTful API』
エンジニアのための勉強会 #3 『RESTful API』
Naoki Yoshitake
TwitterのStreaming APIについて
TwitterのStreaming APIについて
Hidenori Goto
Semelhante a fetch APIを安全に使う方法をおさらいしてみよう
(13)
Phpでrest apiを作った話
Phpでrest apiを作った話
PHP x AWS でスケーラブルなシステムをつくろう
PHP x AWS でスケーラブルなシステムをつくろう
マッシュアップ勉強会
マッシュアップ勉強会
マッシュアップ勉強会
マッシュアップ勉強会
WebAPIではじめるphp入門
WebAPIではじめるphp入門
ASP.NET WEB API 開発体験
ASP.NET WEB API 開発体験
オフラインファーストの思想と実践
オフラインファーストの思想と実践
PHPという概念が存在しない退屈な世界 - AWS LambdaでWebAPP編
PHPという概念が存在しない退屈な世界 - AWS LambdaでWebAPP編
Google App EngineでTwitterアプリを作ろう
Google App EngineでTwitterアプリを作ろう
WebAPI20230326.pdf
WebAPI20230326.pdf
Apilecture for 2014/02/22 at shannonlab
Apilecture for 2014/02/22 at shannonlab
エンジニアのための勉強会 #3 『RESTful API』
エンジニアのための勉強会 #3 『RESTful API』
TwitterのStreaming APIについて
TwitterのStreaming APIについて
Mais de iPride Co., Ltd.
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
iPride Co., Ltd.
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
iPride Co., Ltd.
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
iPride Co., Ltd.
AWS_Bedrock入門 このスライドは2024/03/08の勉強会で発表されたものです。
AWS_Bedrock入門 このスライドは2024/03/08の勉強会で発表されたものです。
iPride Co., Ltd.
AWS Lambdaと AWS API Gatewayを使ったREST API作り
AWS Lambdaと AWS API Gatewayを使ったREST API作り
iPride Co., Ltd.
AWS (Amazon Web Services) を勉強してみる その3 2024/03/01の勉強会で発表されたものです。
AWS (Amazon Web Services) を勉強してみる その3 2024/03/01の勉強会で発表されたものです。
iPride Co., Ltd.
AWS (Amazon Web Services) を勉強してみる おさらい 2024/02/16の勉強会で発表されたものです。
AWS (Amazon Web Services) を勉強してみる おさらい 2024/02/16の勉強会で発表されたものです。
iPride Co., Ltd.
可用性・セキュリティを考慮して AWSでDrupalを構築する 2024/02/09の勉強会で発表されたものです。
可用性・セキュリティを考慮して AWSでDrupalを構築する 2024/02/09の勉強会で発表されたものです。
iPride Co., Ltd.
AWSで全てのパブリックIPv4アドレスが有料になった件について 2024/02/09の勉強会で発表されたものです。
AWSで全てのパブリックIPv4アドレスが有料になった件について 2024/02/09の勉強会で発表されたものです。
iPride Co., Ltd.
AWS CDKを使おうとしたら普通に悪戦苦闘した話 2024/02/02の勉強会で発表されたものです。
AWS CDKを使おうとしたら普通に悪戦苦闘した話 2024/02/02の勉強会で発表されたものです。
iPride Co., Ltd.
AWS (Amazon Web Services) を勉強してみる 2024/01/26の勉強会で発表されたものです
AWS (Amazon Web Services) を勉強してみる 2024/01/26の勉強会で発表されたものです
iPride Co., Ltd.
AWS SAM入門 2024/01/26の勉強会で発表されたものです【アイ・プライド】
AWS SAM入門 2024/01/26の勉強会で発表されたものです【アイ・プライド】
iPride Co., Ltd.
Drupalでフォームの代わりにSPA (React) を表示させる話 2023/12/15の勉強会で発表されたものです。
Drupalでフォームの代わりにSPA (React) を表示させる話 2023/12/15の勉強会で発表されたものです。
iPride Co., Ltd.
ChatGPTを用いてCDKを勉強
ChatGPTを用いてCDKを勉強
iPride Co., Ltd.
OpenID Connectについて
OpenID Connectについて
iPride Co., Ltd.
画像生成AIの問題点
画像生成AIの問題点
iPride Co., Ltd.
AI入門
AI入門
iPride Co., Ltd.
MVCになぞらえて理解するReact
MVCになぞらえて理解するReact
iPride Co., Ltd.
AIについて学んだこと ~ 生成AIとは? ~
AIについて学んだこと ~ 生成AIとは? ~
iPride Co., Ltd.
OAuth2.0について
OAuth2.0について
iPride Co., Ltd.
Mais de iPride Co., Ltd.
(20)
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
AWS_Bedrock入門 このスライドは2024/03/08の勉強会で発表されたものです。
AWS_Bedrock入門 このスライドは2024/03/08の勉強会で発表されたものです。
AWS Lambdaと AWS API Gatewayを使ったREST API作り
AWS Lambdaと AWS API Gatewayを使ったREST API作り
AWS (Amazon Web Services) を勉強してみる その3 2024/03/01の勉強会で発表されたものです。
AWS (Amazon Web Services) を勉強してみる その3 2024/03/01の勉強会で発表されたものです。
AWS (Amazon Web Services) を勉強してみる おさらい 2024/02/16の勉強会で発表されたものです。
AWS (Amazon Web Services) を勉強してみる おさらい 2024/02/16の勉強会で発表されたものです。
可用性・セキュリティを考慮して AWSでDrupalを構築する 2024/02/09の勉強会で発表されたものです。
可用性・セキュリティを考慮して AWSでDrupalを構築する 2024/02/09の勉強会で発表されたものです。
AWSで全てのパブリックIPv4アドレスが有料になった件について 2024/02/09の勉強会で発表されたものです。
AWSで全てのパブリックIPv4アドレスが有料になった件について 2024/02/09の勉強会で発表されたものです。
AWS CDKを使おうとしたら普通に悪戦苦闘した話 2024/02/02の勉強会で発表されたものです。
AWS CDKを使おうとしたら普通に悪戦苦闘した話 2024/02/02の勉強会で発表されたものです。
AWS (Amazon Web Services) を勉強してみる 2024/01/26の勉強会で発表されたものです
AWS (Amazon Web Services) を勉強してみる 2024/01/26の勉強会で発表されたものです
AWS SAM入門 2024/01/26の勉強会で発表されたものです【アイ・プライド】
AWS SAM入門 2024/01/26の勉強会で発表されたものです【アイ・プライド】
Drupalでフォームの代わりにSPA (React) を表示させる話 2023/12/15の勉強会で発表されたものです。
Drupalでフォームの代わりにSPA (React) を表示させる話 2023/12/15の勉強会で発表されたものです。
ChatGPTを用いてCDKを勉強
ChatGPTを用いてCDKを勉強
OpenID Connectについて
OpenID Connectについて
画像生成AIの問題点
画像生成AIの問題点
AI入門
AI入門
MVCになぞらえて理解するReact
MVCになぞらえて理解するReact
AIについて学んだこと ~ 生成AIとは? ~
AIについて学んだこと ~ 生成AIとは? ~
OAuth2.0について
OAuth2.0について
fetch APIを安全に使う方法をおさらいしてみよう
1.
fetch APIを安全に使う方法を おさらいしてみよう 執筆者:トビウオ
2.
fetch APIとは • JavaScriptにて、リソースを示す情報(URL)か ら、実際のリソースを取得するためのAPI •
例えばJSONなどをURLから取得できる • これが無い時代はXMLHttpRequestを使ってい た
3.
fetch APIとは • 先にPromiseについておさらいする •
作成段階では戻り値が未定だが、いずれ判明す る処理(=非同期処理)を表す • Promise同士を組み合わせた処理も記述できる
4.
fetch APIとは • Promiseの説明図
(MDN) がこんな感じ
5.
fetch APIとは • Promiseのサンプルコードがこちら
6.
fetch APIとは • 作成したPromiseの使用例がこちら
7.
fetch APIとは • fetch
APIはPromiseを返すので、こう書ける • ユーザー情報のJSONが返されるものとする
8.
fetch APIとは • async/awaitという仕組みを使うと、thenやcatch を使わずに書くことができる
9.
fetch APIとは • async/awaitという仕組みを使うと、thenやcatch を使わずに書くことができる
10.
参考資料 • Promise -
JavaScript | MDN • Fetch API - Web APIs | MDN • async function - JavaScript | MDN
11.
……だけで話は終わらない • このサンプルコードは実運用できない • その具体的な理由を解説していく
12.
サンプルコードの問題点 • 例外処理を考慮していない • HTTPステータスコードが4xxや5xxの場合の処理 を考慮していない •
(GET以外で) HTTPヘッダーを指定していない
13.
①例外処理 • fetch APIは、ネットワークエラーが起きた際に 例外を投げることがある •
例外をキャッチできないと、Webアプリケーシ ョンの場合は画面が真っ白になる
14.
①例外処理 • try〜catch節でハンドリングすればいい • fetch関数の戻り値はPromise型なので、メソッド チェーンのcatch()を使用する手もある
15.
②HTTP 4xxやHTTP 5xx •
サンプルコードだと、response.statusが200以外で も気にせず処理しようとする • 4xxや5xxはエラーと見做してハンドリングしたい
16.
②HTTP 4xxやHTTP 5xx •
Response型のok()メソッドを使えば、4xxや5xx であるか否かを簡単に調べられる
17.
②HTTP 4xxやHTTP 5xx •
4xxや5xxだとthrowでErrorを送出すれば、処理 をより分かりやすく書ける
18.
②HTTP 4xxやHTTP 5xx •
Errorを継承したクラス を創るプランもある • 要件に応じて柔軟に定義 しよう • TypeScriptの場合は型エ ラーに気をつけたい
19.
③HTTPヘッダーなど • 例えば、fetch関数を使ってデータをPOSTする処 理を記述したいとする
20.
③HTTPヘッダーなど • RESTらしくJSONを扱う場合、HTTPヘッダーと リクエストボディを適切に扱う必要がある
21.
③HTTPヘッダーなど • 加えて、認証トークンを設定したりすると、記 述が肥大化しがち
22.
③HTTPヘッダーなど • 関数として括れば、複数箇所で使用する際、 記述量を削減できる
23.
まとめ • 例外が送出される可能性に気をつける • 4xxエラーや5xxエラーに気をつける •
HTTPヘッダーなど表記周りに気をつける (axiosやwretchなど、サードパーティーのライブラ リを利用すれば、対策は容易になる)
24.
おまけ • こういった処理について、「例外部分もラップ する」といった解決策も考えられる
25.
おまけ • 必要な型を 作成する • 以降、 TypeScriptで 記述する
26.
おまけ • ヘルパーメソッド も作成する
27.
おまけ • 前述までのお膳立てから、GET処理を「Result型 を返す」ように書き換えられる
28.
おまけ • GET処理を使っているのに例外を気にせず処理 できるのは美味しい • 複数のResult型を「合成」できるが割愛
29.
追加の参考資料 • Safe Data
Fetching in Modern JavaScript • https://www.builder.io/blog/safe-data-fetching • My new error... | blog.ojisan.io • https://blog.ojisan.io/my-new-error/
Baixar agora