際際滷

際際滷Share a Scribd company logo
Fetch APIについて
2016.6.30
Developers in KOBE Vol. 6
BathTimeFish 翫 屎才
HTML5-WEST.jp旗燕 / html5j マ`クアップ何 何L / HTML5 Experts.jp メンバ`
NPO隈繁晩云ウェアラブルデバイスユ`ザ`氏尖並
舞偏ウェアラブルデバイス容M氏hメンバ`など
むらおか まさかず
翫屎才
Webアプリケ`ション_k ITI侫轡好謄默O/_k
Webサ`ビス秘/並I藺團灰鵐汽襯謄ング
舞デジタル?ラボ 芙翌函叨
@bathtimefish
HTML5-WEST.jp
Firefox OS _kガイドブック
http://amzn.to/292MeXl
書定も竃ます。Maker Faire 2016
ドアセンサ`粥永鴛g^gY嶄
Fetch apiについて
Fetch API
肝弊旗 HTTP Request
https://fetch.spec.whatwg.org/
モダンなかたちでHTTPリクエストできる。
Promiseベ`スなAPI
こうだったのが、
こうなる。
Service WorkerなどでのHTTP Requestをgに
旋喘できるように_kされていたが、鏡羨したAPIとして
も協xされた。Webブラウザでは window.fetchとして
g廾されている。
https://developer.mozilla.org/ja/docs/Web/API/Fetch_API/Using_Fetch
http://caniuse.com/#feat=fetch
g廾彜r
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に局さないとI尖
がK阻しないうちにService WorkerがK阻してしまうので廣吭。
http://qiita.com/tomoyukilabs/items/9b464c53450acc0b9574
ExtendableEvent.waitUntil()
https://developer.mozilla.org/ja/docs/Web/API/ExtendableEvent/waitUntil
湖 
XHRよりいろいろできるfetch API
Polyfillもあることだしそろそろ聞っていったら
いいかもしれませんね。
Thanks !

More Related Content

Fetch apiについて