Fetch with Response Details

This is JavaScript program demonstrates how to fetch and display the details of the response.

FetchResponse.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width" />
		<title>XoaX.net's Javascript</title>
		<!-- Supply a transparent 1x1 favicon -->
		<link rel="icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=">
		<script type="text/javascript" src="FetchResponse.js"></script>
	</head>
	<body onload="Initialize()">
	</body>
</html>

FetchResponse.js

async function Initialize() {
	// NOTE: THIS REQUIRES A WEB SERVER TO RUN
	let sFileName = "ActsOfTheApostles28.txt";

	const kqBodyElement = document.body;

	const kqRequest = new Request(sFileName);

	fetch (kqRequest).then((qResponse) =>{
		const qHeadersTextElement = document.createElement("pre");
		qHeadersTextElement.innerHTML = "Response: \n" + GetObjectString(qResponse);
		kqBodyElement.appendChild(qHeadersTextElement);
		kqBodyElement.appendChild(document.createElement("hr"));
		if (!qResponse.ok) {
			throw new Error(`HTTP error, status = ${qResponse.status}`);
		}
		return qResponse.text();
	}).then((sMessage) => {
		kqBodyElement.innerHTML += sMessage;
	}).catch((qError) => {
		const qErrorElement = document.createElement("p");
		qErrorElement.appendChild(document.createTextNode(`Error: ${qError.message}`));
		kqBodyElement.appendChild(qErrorElement);
	});
}


function GetObjectString(qObject) {
  var iCount = 0;
  var sOutput = typeof(qObject)+": " + qObject.constructor.name + "\n";
  for (var sProperty in qObject) {
    sOutput += "    " + sProperty + ': ' + qObject[sProperty]+"\n";
    ++iCount;
    if (iCount >= 20) {
    	sOutput += "    ...\n";
    }
  }
  return sOutput;
}