Fetch a Simple Stream

This is JavaScript program demonstrates how to fetch a stream.

FetchSimpleStream.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="FetchSimpleStream.js"></script>
	</head>
	<body onload="Initialize()">
		<img id="idImage" />
	</body>
</html>

FetchSimpleStream.js

async function Initialize() {
	// NOTE: THIS REQUIRES A WEB SERVER TO RUN
	let sFileName = "TheCrucifixion_LeonBonnat.png";
	let qImageElement = document.getElementById("idImage");
	
	fetch(sFileName)
	.then(qResponse => qResponse.body)
	.then(qReadableStream => {
		const kqReader = qReadableStream.getReader();
		// Read the stream and return it.
		return new ReadableStream({
			async start(qController) {
				while (true) {
					const { done, value } = await kqReader.read();
					if (done) {
						break;
					}
					qController.enqueue(value);
				}
				qController.close();
				kqReader.releaseLock();
			}
		})

	}).then(qReadableStream2 => new Response(qReadableStream2))
	.then(qResponse2 => qResponse2.blob())
	.then(qResponseBlob => URL.createObjectURL(qResponseBlob))
	.then(qResponseUrl => qImageElement.src = qResponseUrl)
	.catch((qError) => {
		const qErrorElement = document.createElement("p");
		qErrorElement.appendChild(document.createTextNode(`Error: ${qError.message}`));
		document.body.appendChild(qErrorElement);
	});
}

Core JavaScript

Fetch a Simple Stream

FetchSimpleStream.html

FetchSimpleStream.js

Output