Use a small large and print the bytes as a string

Author: TomasHubelbauer

index.js

@@ -2,21 +2,23 @@ window.addEventListener('load', async () => {
   /* https://developer.mozilla.org/en-US/docs/Web/HTTP/Range_requests */
 
   const id = Math.round(Math.random() * 1000);
+  const bytes = 8;
+  const range = `bytes=0-${bytes - 1}`;
 
   // See if range headers are supported: Accept-Ranges in headers?
   const headResponse = await fetch(`https://picsum.photos/id/${id}/100/100`, { method: 'HEAD' });
   console.log(headResponse.headers.forEach(console.log));
 
-  const getResponse = await fetch(`https://picsum.photos/id/${id}/100/100`, { method: 'GET', headers: { Range: "bytes=0-255" } });
+  const getResponse = await fetch(`https://picsum.photos/id/${id}/100/100`, { method: 'GET', headers: { Range: range } });
   const arrayBuffer = await getResponse.arrayBuffer();
-  console.log(arrayBuffer.byteLength);
+  console.log(String.fromCharCode(...new Uint8Array(arrayBuffer)));
 
   const githubPagesUrl = 'https://tomashubelbauer.github.io/fetch-range-request/index.html';
 
   const githubPagesHeadResponse = await fetch(githubPagesUrl, { method: 'HEAD' });
   console.log(githubPagesHeadResponse.headers.forEach(console.log));
 
-  const githubPagesGetResponse = await fetch(githubPagesUrl, { method: 'GET', headers: { Range: "bytes=0-255" } });
+  const githubPagesGetResponse = await fetch(githubPagesUrl, { method: 'GET', headers: { Range: range } });
   const githubPagesArrayBuffer = await githubPagesGetResponse.arrayBuffer();
-  console.log(githubPagesArrayBuffer.byteLength);
+  console.log(String.fromCharCode(...new Uint8Array(githubPagesArrayBuffer)));
 });