examples/js-fetch/index.js

/**
 * Builds a reply to the given request
 */
const reply = async (request) => {
  if (request.method != "GET") {
    // Don't allow other methods.
    // Here you can see how to return a custom status
    return new Response("Method not allowed", {
      status: 405
    });
  }

  // Body response
  let body;

  try {
    let res = await fetch('https://jsonplaceholder.typicode.com/posts/');
    let json = await res.json();

    // Build a new response.
    // Add some basic sanitization
    body = `<!DOCTYPE html>
    <head>
      <title>Wasm Workers Server</title>
      <meta name="viewport" content="width=device-width,initial-scale=1">
      <meta charset="UTF-8">
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
      <style>
        body { max-width: 1000px; }
        main { margin: 5rem 0; }
        h1, p { text-align: center; }
        h1 { margin-bottom: 2rem; }
        pre { font-size: .9rem; }
        pre > code { padding: 2rem; }
        p { margin-top: 2rem; }
      </style>
    </head>
    <body>
      <main>
        <h1>Hello from Wasm Workers Server 👋</h1>
        <p>Available articles:</p>
        <ul>
          ${json.map(({ title }) => `<li>${title.replace("<", "&lt;").replace(">", "&gt;")}</li>`).join("")}
        </ul>
        <p>
          This page was generated by a JavaScript file running in WebAssembly.
        </p>
      </main>
    </body>`;
  } catch (e) {
    body = `There was an error with the request: ${e}`;
  }

  let response = new Response(body);

  // Add a new header
  response.headers.set("x-generated-by", "wasm-workers-server");

  return response;
}

// Subscribe to the Fetch event
addEventListener("fetch", event => {
  return event.respondWith(reply(event.request));
});