- JavaScript
- 2022-05-10 - 更新:2022-05-11
これまで非同期通信といえばXMLHttpRequestでしたが、最近は新たにFetch APIが主流になりつつあるようです。
Fetch APIがいつ定義されたのかは定かではありませんが、HTML Living Standardになった頃でしょうか。
それはともかくFetch APIの使い方を見ていきたいと思います。
まずはこれまでのXMLHttpRequestを確認してみましょう。
XMLHttpRequest
XMLHttpRequestオブジェクトの宣言
let xmlHttp; if(window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlHttp = new XMLHttpRequest(); } else { // code for IE6, IE5 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); }
GETの場合
xmlHttp.open("GET", url, true); xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8'); xmlHttp.onreadystatechange = function() { if(xmlHttp.readyState == XMLHttpRequest.DONE && xmlHttp.status == 200) { const data = xmlHttp.responseText; // 何らかの処理 } } xmlHttp.send(null);
POSTの場合
xmlHttp.open("POST", url, true); xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8'); xmlHttp.onreadystatechange = function() { if(xmlHttp.readyState == XMLHttpRequest.DONE && xmlHttp.status == 200) { const data = xmlHttp.responseText; // 何らかの処理 } } xmlHttp.send(param);
Fetch API
Fetch APIの書式は次のようになります。
let promise = fetch(url, [options])
fetchはPromiseオブジェクトを返してくれます。
以下の例では基本的にPOSTでの通信としています。
続きを読む…»