Fetch API について

2016.6.30Developers in KOBE Vol. 6

BathTimeFish 村岡 正和

HTML5-WEST.jp 代表 / html5j マークアップ部 部長 / HTML5 Experts.jp メンバーNPO 法人日本ウェアラブルデバイスユーザー会理事神戸市ウェアラブルデバイス推進会議メンバーなど

むらおか　まさかず

村岡正和Web アプリケーション開発　 IT 業務システム設計 / 開発

Web サービス導入 / 事業戦略コンサルティング神戸デジタル・ラボ 社外取締役

@bathtimefish

HTML5-WEST.jp

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

今年も出ます。 Maker Faire 2016 ！

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

Fetch API

次世代 HTTP Request

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

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

こうだったのが、

こうなる。

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

https://developer.mozilla.org/ja/docs/Web/API/Fetch_API/Using_Fetch

http://caniuse.com/#feat=fetch

実装状況

https://github.com/github/fetch

Polyfill がある

Header オブジェクト

URL オプション

Promise が返るJSON が返る

基本的なリクエスト

ヘッダーやオプションの指定

‘cors’ で非 CORS にリクエストするとエラーとなる( デフォルト )‘no-cors’ だと空のレスポンスが返る

デフォルトでは Cookie などのクレデンシャルを含めてリクエストしない含めたいときは’ include’ とする

リクエストヘッダの追加

https://fetch.spec.whatwg.org/#concept-request-cache-mode6 つの cache-mode がある : “default", "no-store", "reload", "no-cache", "force-cache", "only-if-cached"

フォームデータを POST する例FormData オブジェクト

データを追加

Request Method POST

Headers / Request / Response オブジェクト

Request オブジェクト

Headers オブジェクト

Response オブジェクトFetch が成功して正常にレスポンスされたとき true となる404 とかの場合 response.ok = false となる

ネットワークエラーなどで fetch が reject されたときcatch にエラーオブジェクトがコールバックされる

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

感　想XHR よりいろいろできる fetch API

Polyfill もあることだしそろそろ使っていったらいいかもしれませんね。

Thanks !