myFetchSample.js

//API実行用関数(POST)
function fetchUrlPost(URL, request, requestHeaders) {
	return new Promise(function(resolve, reject) {
		fetch(URL, {
			mode: 'cors',
			method: 'POST',
			body: JSON.stringify(request),
			headers: requestHeaders
		}).then(response => {
			console.log("HTTP STATUS :" + String(response.status));
			return response.json();
		}).then(json => {
			// json文字列がstring型の場合はJSONオブジェクトに変換
			let jsonObj;
			if (typeof json === 'string') {
				jsonObj = JSON.parse(json);
			} else if (typeof json === 'object') {
				jsonObj = json;
			}
			console.log(jsonObj);
			if ('errorMessage' in jsonObj) { // APIの返却値がErrorの場合
				//document.getElementById("displayTable").innerHTML = `<div class="h4">API ERROR: ${jsonObj.errorMessage}</div>`;
				reject(jsonObj);
			}
			resolve(jsonObj);
		}).catch(error => {
			console.error('Error:', error);
			reject(error);
		});
	})
}

// 開始ボタンからのAPI実行
document.getElementById("startBtn").addEventListener("click", submitApiFromStart);
function submitApiFromStart(event) {
	let request = requestParams();
	console.log(request);

	let URL = targetApi();
	if (validation(request, URL)) {
		let btnName = event.target.id
		let btnStr = event.target.textContent;
		let disableBtnStr = "処理中"
		btnSwitchActivation(btnName, false, disableBtnStr, submitApiFromStart);

		let requestHeaders = new Headers({'Content-Type': 'text/plain'});
		fetchUrlPost(URL, request, requestHeaders).then(jsonObj => {
			outputToHTML(jsonObj);
		}).catch(error => {
			console.log('startBtn:Error: ' + JSON.stringify(error));
			alert('startBtn:Error: ' + JSON.stringify(error));
		}).then(() => {
			btnSwitchActivation(btnName, true, btnStr, submitApiFromStart);
		});

	}else {
		alert("Error:\nparameter error.");
	}
}

// リクエスト作成ｋ
function requestParams() {
	let request = {
		"request": {
			"test": {
				"required": {
					"datetime": {
						"start": "2018-07-04 00:00:00"
						,"end": "2018-07-04 23:59:59"
					}
				}
			}
		}
	};
	return request;
}

// API(URL)を返却
function targetApi() {
	return "https://sample.com";
}

// 必須項目チェック
function validation(data, url) {
	let startDatetime = data.request.test.required.datetime.start;
	let endDatetime = data.request.test.required.datetime.end;
	if (!/^\d{4}-\d{2}-\d{2}\ \d{2}:\d{2}:\d{2}$/.test(startDatetime)) {
		return false;
	} else if (!/^\d{4}-\d{2}-\d{2}\ \d{2}:\d{2}:\d{2}$/.test(endDatetime)) {
		return false;
	} else if (startDatetime >= endDatetime) {
		return false;
	} else if (typeof url != "string") {
		return false;
	} else if (url == "") {
		return false;
	} else {
		return true;
	}
}

function outputToHTML(jsonObj) {
	document.getElementById("test").innerHTML = JSON.stringify(jsonObj);
}

// ボタンの有効無効切り替え,ボタン文字変更
function btnSwitchActivation(btnName, enable, btnStr, func) {
	if (enable) {
		document.getElementById(btnName).addEventListener("click", func);
		document.getElementById(btnName).innerText = btnStr;
	} else {
		document.getElementById(btnName).removeEventListener("click", func);
		document.getElementById(btnName).innerText = btnStr;
	}
}