JavaScriptのFetch APIについて


新しめのChrome、Firefox、Edge、Safariで使えるService WorkersXMLHttpRequest
の代わりとして実装された 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('<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も追加きます。

🐞 fetchのオプション

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

🚕 参考リンク

📚 おすすめの書籍