Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Fetch apiについて

585 views

Published on

Fetch apiについて

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Fetch apiについて

  1. 1. Fetch APIについて 2016.6.30 Developers in KOBE Vol. 6 BathTimeFish 村岡 正和
  2. 2. HTML5-WEST.jp代表 / html5j マークアップ部 部長 / HTML5 Experts.jp メンバー NPO法人日本ウェアラブルデバイスユーザー会理事 神戸市ウェアラブルデバイス推進会議メンバーなど むらおか まさかず 村岡正和 Webアプリケーション開発 IT業務システム設計/開発 Webサービス導入/事業戦略コンサルティング 神戸デジタル・ラボ 社外取締役 @bathtimefish HTML5-WEST.jp
  3. 3. Firefox OS 開発ガイドブック http://amzn.to/292MeXl
  4. 4. 今年も出ます。Maker Faire 2016!
  5. 5. ドアセンサーAPI実証実験中!
  6. 6. Fetch API 次世代 HTTP Request
  7. 7. https://fetch.spec.whatwg.org/
  8. 8. モダンなかたちでHTTPリクエストできる。 PromiseベースなAPI
  9. 9. こうだったのが、
  10. 10. こうなる。
  11. 11. Service WorkerなどでのHTTP Requestを簡単に 利用できるように開発されていたが、独立したAPIとして も定義された。Webブラウザでは window.fetchとして 実装されている。 https://developer.mozilla.org/ja/docs/Web/API/Fetch_API/Using_Fetch
  12. 12. http://caniuse.com/#feat=fetch 実装状況
  13. 13. https://github.com/github/fetch Polyfillがある
  14. 14. Headerオブジェクト URL オプション Promiseが返る JSONが返る 基本的なリクエスト
  15. 15. ヘッダーやオプションの指定 ‘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"
  16. 16. フォームデータをPOSTする例 FormDataオブジェクト データを追加 Request Method POST
  17. 17. Headers / Request / Response オブジェクト Requestオブジェクト Headersオブジェクト Responseオブジェクト Fetchが成功して正常にレスポンスされたとき trueとなる 404とかの場合 response.ok = false となる ネットワークエラーなどでfetchがrejectされたとき catchにエラーオブジェクトがコールバックされる
  18. 18. 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
  19. 19. 感 想 XHRよりいろいろできるfetch API Polyfillもあることだしそろそろ使っていったら いいかもしれませんね。
  20. 20. Thanks !

×