JavaScriptのFetchの非同期通信でJSONを取得

JavaScriptのFetch APIの非同期通信でJSONを取得するサンプルです。

サンプル	Fetch API
	POSTでデータを送信してJSONを取得する
	GETでデータを送信してJSONを取得する

Fetch API

非同期通信でデータを取得できます。
戻り値は、ResponseオブジェクトのPromiseを返します。成功時は.then、失敗時は.catchで処理します。
fetchは取ってくるという意味です。
以下は、MDNのFetchのリンクです。
https://developer.mozilla.org/ja/docs/Web/API/Fetch_API/Using_Fetch

POSTでデータを送信してJSONを取得する

POSTでデータを送信してJSONを取得するサンプルです。

9行目のボタンを押すとPOSTで通信が始まります。
テストするサイトとしてhttpbin(http://httpbin.org/)を指定しています。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル</title>
</head>
<body >
<form id="form1">
<input type="button" value="ボタン1" onclick="clickBtn1()">
<input type="text" name="cs1" value="custom1" maxlength="7">
<input type="text" name="cs2" value="custom2" maxlength="7">
</form>
<script>
function clickBtn1(){
	// FormDataで画面のform内の値を取得
	const form1 = new FormData(document.getElementById("form1"));
    const apiUrl = "http://httpbin.org/post"

	fetch(apiUrl,{ //URL
			method:"POST", //POSTを指定
			body:form1 //16行目で取得したデータ
		})
		.then(function(response) { //成功時に実行される その1
			console.log("status=" + response.status); //status=200
			return response.json();
		})
		.then(function(data) { //成功時に実行される その2
			console.log(JSON.stringify(data)); //JSONを出力
		})
		.catch(function(err) { //失敗時に実行される
			console.log("err=" + err);
		});
}
</script>
</body>
</html>

16行目のFormDataは、データを送信するため10,11行目のテキストボックスの名前と値を設定しています。
19行目は、fetchです。引数にURLとPOSTと送信するデータを指定しています。
23,27行目の.thenは、成功した時にそれぞれ実行されます。以下のようにコンソールにstatusとJSONが表示されます。

25行目のresponse.json()で27行目のデータを取得できるようになります。

28行目のstringifyメソッドは、JavaScriptオブジェクトをJSONに変換します。
30行目の.catchはエラーが発生した時に実行されます。

出力されるJSONです。(IPアドレス等の一部情報は削除しています。)

{
    "args": {},
    "data": "",
    "files": {},
    "form": {
        "cs1": "custom1",
        "cs2": "custom2"
    },
    "headers": {
        "Accept": "*/*",
        "Accept-Encoding": "gzip, deflate",
        "Accept-Language": "ja,en-US;q=0.9,en;q=0.8",
        "Content-Length": "238",
        "Content-Type": "multipart/form-data; boundary=----WebKitFormBoundaryBAJWoXbMT2yt3V1A",
        "Host": "httpbin.org",
        "Origin": "null",
    },
    "json": null,
    "url": "http://httpbin.org/post"
}

6,7行目は、上記コードの10,11行目のテキストボックスで指定した値が入ります。

GETでデータを送信してJSONを取得する

GETでデータを送信してJSONを取得するサンプルです。

9行目のボタンを押すとGETで通信が始まります。
テストするサイトとしてhttpbin(http://httpbin.org/)を指定しています。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル</title>
</head>
<body >

<input type="button" value="ボタン1" onclick="clickBtn1()">
<input type="text" name="cs1" id="cs1" value="custom1" maxlength="7">
<input type="text" name="cs2" id="cs2" value="custom2" maxlength="7">

<script>
function clickBtn1(){
	// URLSearchParamsに画面の値をセット
	const para1 = new URLSearchParams();
	para1.set("cs1",document.getElementById("cs1").value);
	para1.set("cs2",document.getElementById("cs2").value);

	fetch("http://httpbin.org/get?" + para1.toString())

		.then(function(response) { //成功時に実行される その1
			console.log("status=" + response.status); //status=200
			return response.json();
		})
		.then(function(data) { //成功時に実行される その1
			console.log(JSON.stringify(data)); //JSONを出力
		})
		.catch(function(err) { //失敗時に実行される
			console.log("err=" + err);
		});
}
</script>
</body>
</html>

16～18行目のURLSearchParamsは、データを送信するため10,11行目のテキストボックスの名前と値を設定しています。
20行目は、fetchです。URLと送信するデータを指定しています。
22,26行目の.thenは、成功した時にそれぞれ実行されます。

24行目のresponse.json()で26行目のデータを取得できるようになります。

27行目のstringifyメソッドは、JavaScriptオブジェクトをJSONに変換します。
29行目の.catchはエラーが発生した時に実行されます。
※methodオプションのデフォルトはGETなので、method:"GET"の記述は不要です。