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/

fetch APIを安全に使う方法をおさらいしてみよう

Estás leyendo una previsualización.

Eche un vistazo a continuación

fetch APIを安全に使う方法をおさらいしてみよう

Más Contenido Relacionado

Más de iPride Co., Ltd. (20)

Más reciente (20)