Fetch apiについて

Fetch APIについて
2016.6.30
Developers 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-mode
6つの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もあることだしそろそろ使っていったら
いいかもしれませんね。

Fetch apiについて

More Related Content

What's hot (20)

Viewers also liked (19)

Similar to Fetch apiについて (14)

More from Masakazu Muraoka (16)

Fetch apiについて