Skip to main content

Vanilla JavaScript UMD CDN Simple App

This is a minimal Vanilla JavaScript example demonstrating how to use the lunex-http library via a UMD CDN build. It is suitable for environments without module support, and it works directly in the browser using <script> tags.

How to run this example​

  • Simply open the HTML file in any modern browser — no build tools or module loaders are needed.
Note

To avoid CORS and other browser restrictions when testing API requests, it's recommended to serve the file over HTTP using a local server such as http-server, Apache, or Python's http.server.

What this example shows​

  • How to include the UMD version of lunex-http via CDN.
  • How to instantiate LunexClient and set custom options.
  • How to perform an asynchronous GET request using getAsync.

Notes​

  • This example works without ES module support.
  • Since it's UMD-based, LunexClient is available globally via window.LunexClient.
  • Can be hosted or tested entirely without Node.js or bundlers.

Source Code​

index.html​

<!DOCTYPE html>
<html>
  <head>
    <title>Lunex HTTP UMD Example</title>

    <!-- unpkg CDN (latest version): https://unpkg.com/lunex-http/dist/umd/lunex-client.umd.js  -->
    <!-- Local: umd/lunex-client.umd.js or where the files have been imported -->

    <!-- CDN (jsDelivr shown, can be replaced with unpkg or local file) -->
    <script src="https://cdn.jsdelivr.net/npm/lunex-http@latest/dist/umd/lunex-client.umd.js"></script>
  </head>
  <body>
    <div id="output">Loading...</div>

    <script>
      const output = document.getElementById('output');
      const LunexClient = window.LunexClient.default;
      const LunexClientOptions = window.LunexClient.LunexClientOptions;

      const options = new LunexClientOptions({
        timeout: 8000,
        maxRetries: 2,
      });

      const client = new LunexClient(
        'https://jsonplaceholder.typicode.com',
        {},
        options
      );

      async function fetchUsers() {
        try {
          const users = await client.getAsync('users');
          output.innerHTML = `<pre>${JSON.stringify(users, null, 2)}</pre>`;
        } catch (error) {
          output.textContent = 'Error fetching users: ' + error.message;
        }
      }

      fetchUsers();
    </script>
  </body>
</html>