fetch('https://example.com/data')
  .then(response => {
    if(response.ok) {
      return response.json(); // Assuming the response is JSON
    }
    throw new Error('Network response was not ok.');
  })
  .then(data => console.log(data))
  .catch(error => console.error('Fetch error:', error));

fetch('https://example.com/data')
  .then(response => {
    const contentLength = response.headers.get('Content-Length');
    let receivedLength = 0; // received that many bytes at the moment
    let reader = response.body.getReader();
    let chunks = []; // array of received binary chunks (comprises the body)

    return new ReadableStream({
      start(controller) {
        function push() {
          // "done" is a Boolean and value a "Uint8Array"
          reader.read().then(({done, value}) => {
            if (done) {
              controller.close();
              return;
            }
            
            chunks.push(value);
            receivedLength += value.length;
            
            console.log(`Received ${receivedLength} of ${contentLength}`);
            
            // Enqueue the next data chunk into our target stream
            controller.enqueue(value);
            push();
          });
        }
        
        push();
      }
    });
  })
  .then(stream => new Response(stream))
  .then(response => response.blob())
  .then(blob => console.log(blob)) // Do whatever with the blob
  .catch(error => console.error('Fetch error:', error));

let xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/data', true);

xhr.onload = function() {
  if (xhr.status === 200) {
    let data = JSON.parse(xhr.responseText);
    console.log(data);
  } else {
    console.error('Request failed. Returned status of ' + xhr.status);
  }
};

xhr.send();

let xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/data', true);

xhr.onprogress = function(event) {
  if (event.lengthComputable) {
    let percentComplete = (event.loaded / event.total) * 100;
    console.log(`Progress: ${percentComplete}%`);
  }
};

xhr.onload = function() {
  // The request is complete and data is available in `xhr.responseText`
};

xhr.onerror = function() {
  console.error('Request failed');
};

xhr.send();

let file = document.getElementById('fileupload').files[0]; // Assuming <input type="file" id="fileupload">
let xhr = new XMLHttpRequest();
let formData = new FormData();

formData.append('file', file);

xhr.upload.onprogress = function(event) {
  if (event.lengthComputable) {
    let percentComplete = (event.loaded / event.total) * 100;
    console.log(`Upload Progress: ${percentComplete}%`);
  }
};

xhr.onload = function() {
  if (xhr.status === 200) {
    console.log('File successfully uploaded');
  } else {
    console.error('Upload failed. Returned status of ' + xhr.status);
  }
};

xhr.onerror = function() {
  console.error('Upload failed.');
};

xhr.open('POST', 'https://example.com/upload', true);
xhr.send(formData);