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

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

確認環境
・Google Chrome

目次

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

Fetch API

  • 非同期通信でデータを取得できます。
  • 戻り値は、ResponseオブジェクトのPromiseを返します 。成功時は.then、失敗時は.catchで処理します。
  • 未対応のブラウザがあります。IEは未対応です。
  • 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"));

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

16行目のFormDataは、データを送信するため10,11行目のテキストボックスの名前と値を設定しています。
18行目は、fetchです。引数にURLとPOSTと送信するデータを指定しています。
22,26行目の.thenは、成功した時にそれぞれ実行されます。
23行目は、HTTPステータスコードを表示します。成功時は200です。
27行目のstringifyメソッドは、JavaScriptオブジェクトをJSONに変換します。
29行目の.catchはエラーが発生した時に実行されます。

実行すると27行目で、以下の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(response1) { //成功時に実行される
			console.log("status=" + response1.status); //status=200
			return response1.json();
		})
		.then(function(data1) { //成功時に実行される
			console.log(JSON.stringify(data1)); //JSONを出力
		})
		.catch(function(err1) { //失敗時に実行される
			console.log("err=" + err1);
		});
}
</script>
</body>
</html>

16~18行目のURLSearchParamsは、データを送信するため10,11行目のテキストボックスの名前と値を設定しています。
20行目は、fetchです。URLと送信するデータを指定しています。
22,26行目の.thenは、成功した時にそれぞれ実行されます。
23行目は、HTTPステータスコードを表示します。成功時は200です。
27行目のstringifyメソッドは、JavaScriptオブジェクトをJSONに変換します。
29行目の.catchはエラーが発生した時に実行されます。
※methodオプションのデフォルトはGETなので、method:"GET"の記述は不要です。

関連の記事

JavaScript Promiseを使用するサンプル
JSONを整形するWebツール

△上に戻る