JSFiddle - React, Tailwind, and code Playground

HTML

<html>

<body>
  <input type="text" id="time1">
  <input type="text" id="time2"> <input type="text" id="time3"><br /><br />
  <textarea id="output1" cols="50" rows="5"></textarea>
  <textarea id="output2" cols="50" rows="5"></textarea>
  <textarea id="output3" cols="50" rows="5"></textarea>
</body>

</html>

JavaScript

console.log("lets go");

async function getWithThen(myRequest) {

  const startTime = new Date().getTime();
  console.log(startTime);

  fetch(myRequest)
    .then(response => response.json())
    .then(json => {
      console.log('here');
      document.getElementById("output1").value = JSON.stringify(json);
      document.getElementById("time1").value = new Date().getTime() - startTime;
    });

}


async function getWithAwait(myRequest) {
  const startTime = new Date().getTime();
  console.log(startTime);
  const response = await fetch(myRequest);
  const json = await response.json();
  console.log(json);
  console.log('here2');
  document.getElementById("output2").value = JSON.stringify(json);
  document.getElementById("time2").value = new Date().getTime() - startTime;
}

async function getWithXhttp() {
  const startTime = new Date().getTime();
  var xhttp = new XMLHttpRequest();
  xhttp.open(
    "GET",
    "https://run.mocky.io/v3/7a7a924f-72dd-4cd7-aefa-12be3608e839",
    true
  );
  xhttp.send();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("output3").value = this.responseText;
      document.getElementById("time3").value = new Date().getTime() - startTime;
    }
  };
}

const myRequest = new Request("https://run.mocky.io/v3/7a7a924f-72dd-4cd7-aefa-12be3608e839", {});

getWithThen(myRequest);
getWithAwait(myRequest);
getWithXhttp();