Fetch API
Last-modified: 2018-12-30 (日) 15:50:11 (83d)

Tag: IT WEB API

menu

概要

ネットワークを超えてリソースを取得する。
Ajaxにおいて、XMLHttpRequest の 代替として利用。

非同期のネットワーク通信(Ajax等)において、XHRに対して、拡張的で簡単で分かりやすく記載できる。

参考URL

🔗 Fetch API | MDN
https://developer.mozilla.org/ja/docs/Web/API/Fetch_API

仕様

引数

下記リンクに引数とオプションの一覧が記載されている。

🔗 Fetch API | MDN > 引数
https://developer.mozilla.org/ja/docs/Web/API/WindowOrWorkerGlobalScope/fetch#Parameters

対応ブラウザ

下記を見る限り、最近の主要なブラウザは網羅できているが、一部のオプションは非対応のものもある。
IEやバージョンが古いブラウザを利用していると動作しないため、注意が必要。

  • Chrome 14-
  • Firefox 39-
  • Opera 29-
  • Microsoft Edge 14-
  • Safari 10.1-
  • iOS Safari 10.3-
  • Android Browser 67-
  • Chrome for Android 70-

参考URL

🔗 Can I use... Support tables for HTML5, CSS3, etc
https://caniuse.com/#feat=fetch

🔗 Fetch API | MDN > ブラウザの対応
https://developer.mozilla.org/ja/docs/Web/API/Fetch_API#Browser_compatibility

使用方法

JSON

fetch(url)
  .then(function (response) {
    return response.json();
  })
  .then(function(myJson) {
     // 受け取ったJSONオブジェクトの処理
     console.log(JSON.stringify(myJson));
  });

参考サイト

説明

使用例

🔗 お疲れさまXMLHttpRequest、こんにちはfetch - Qiita
https://qiita.com/tomoyukilabs/items/9b464c53450acc0b9574