JavaScriptのFetch APIについて

新しめのChrome、Firefox、Edge、Safariで使えるService WorkersでXMLHttpRequest
の代わりとして実装された fetch()の紹介です。fetch()はPromiseで返されて、
resolve関数にはResponseオブジェクトが返されます。

🐯 Getのサンプル

url = http://www.yahoo.co.jp;
fetch(url, { /* JSONでオプションを指定 */ }).then(function(response) {
  return response.json();
}).then(function(json) {
  // Response MetaData (https://fetch.spec.whatwg.org/#responses)
  console.log(response.headers.get('Content-Type'));  
  console.log(response.headers.get('Date'));
  console.log(response.status);  
  console.log(response.statusText);  
  console.log(response.type);  
  console.log(response.url);  
});

🐝 Postのサンプル

fetch(url, {
  method: 'POST',
  body: new FormData(document.getElementById('タグのid')),
  headers: {  
    Content-type: application/x-www-form-urlencoded; charset=UTF-8  
  }
}).then(function(response) {
  return response.json();
}).then(function(json) {
  ...
});

postするformの情報やオリジナルのheadersも追加きます。

🎂 fetchのオプション

オプション	値のサンプル
{ mode: ‘cros’ }	Cross-Origin Resource Sharing、htmlを取得したサーバ以外からAjaxでデータを取得
{ credentials: ‘include’ }	認証の情報などを通信に含める