Using async/await and fetch to call API

Vanilla JavaScript/HTML example using async/await to call an API.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Vanilla JavaScript App</title>
  <style>
  * {
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
  }

  html,
  body {
    margin: 0;
    border: 0;
    padding: 0;
    background-color: #fff;
  }

  main {
    margin: auto;
    width: 50%;
    padding: 20px;
  }

  main {
    text-align: center;
  }

  h1 {
    font-size: 3.5em;
  }
  </style>
</head>
<body>
  <main>
    <h1>Vanilla JavaScript App</h1>
    <p>Loading content from the API: <span id="message"></span></p>
  </main>
</body>
<script>
(async function () {
  let response = await fetch('api/message');
  let message = await response.json();

  document.querySelector("#message").innerHTML = message.text;
})();
</script>
</html>