Fetch apiについて

1. Fetch APIについて
2016.6.30
Developers in KOBE Vol. 6
BathTimeFish 村岡 正和

2. HTML5-WEST.jp代表 / html5j マークアップ部 部長 / HTML5 Experts.jp メンバー
NPO法人日本ウェアラブルデバイスユーザー会理事
神戸市ウェアラブルデバイス推進会議メンバーなど
むらおか まさかず
村岡正和
Webアプリケーション開発 IT業務システム設計/開発
Webサービス導入/事業戦略コンサルティング
神戸デジタル・ラボ 社外取締役
@bathtimefish
HTML5-WEST.jp

3. Firefox OS 開発ガイドブック
http://amzn.to/292MeXl

4. 今年も出ます。Maker Faire 2016！

5. ドアセンサーAPI実証実験中！

7. Fetch API
次世代 HTTP Request

8. https://fetch.spec.whatwg.org/

9. モダンなかたちでHTTPリクエストできる。
PromiseベースなAPI

10. こうだったのが、

11. こうなる。

12. Service WorkerなどでのHTTP Requestを簡単に
利用できるように開発されていたが、独立したAPIとして
も定義された。Webブラウザでは window.fetchとして
実装されている。
https://developer.mozilla.org/ja/docs/Web/API/Fetch_API/Using_Fetch

13. http://caniuse.com/#feat=fetch
実装状況

14. https://github.com/github/fetch
Polyfillがある

15. Headerオブジェクト
URL オプション
Promiseが返る
JSONが返る
基本的なリクエスト

16. ヘッダーやオプションの指定
‘cors’ で非CORSにリクエストするとエラーとなる
(デフォルト)
‘no-cors’ だと空のレスポンスが返る
デフォルトではCookieなどのクレデンシャルを含めてリクエストしない
含めたいときは’include’とする
リクエストヘッダの追加
https://fetch.spec.whatwg.org/#concept-request-cache-mode
6つのcache-modeがある: “default", "no-store", "reload", "no-cache", "force-cache", "only-if-cached"

17. フォームデータをPOSTする例
FormDataオブジェクト
データを追加
Request Method POST

18. Headers / Request / Response オブジェクト
Requestオブジェクト
Headersオブジェクト
Responseオブジェクト
Fetchが成功して正常にレスポンスされたとき trueとなる
404とかの場合 response.ok = false となる
ネットワークエラーなどでfetchがrejectされたとき
catchにエラーオブジェクトがコールバックされる

19. Service Worker内でpush通知を受け取るpromiseをevent.waitUntilに渡さないと処理
が終了しないうちにService Workerが終了してしまうので注意。
http://qiita.com/tomoyukilabs/items/9b464c53450acc0b9574
ExtendableEvent.waitUntil()
https://developer.mozilla.org/ja/docs/Web/API/ExtendableEvent/waitUntil

20. 感 想
XHRよりいろいろできるfetch API
Polyfillもあることだしそろそろ使っていったら
いいかもしれませんね。

21. Thanks !