Fetch API

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

1. 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);  
});

2. Post のサンプル

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

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

3. fetchのオプション

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

4. 参考リンク

results matching ""

    No results matching ""