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について (20)

More from Masakazu Muraoka (13)

Recently uploaded (8)

Fetch apiについて