Event Handling

1.0

The code demonstrate how some events can be used. Listed below are some common use cases

  • before-render - Good place to twaek the OpenAPI spec if needed. In this example the Title above is dynamically created
  • before-try - Good place to twaek the AJAX request sucha as adding a request header or abort the request
  • after-try - Good place to inspect the response received

To test it out go ahead and click TRY below, you will notice all POST requests are aborted and GET are success 

<!doctype html>

<html>
  <body>
    <rapi-doc id = "thedoc" spec-url = "..."> </rapi-doc>

    <script>
      document.addEventListener('DOMContentLoaded', (event) => {
        let docEl = document.getElementById("thedoc");

        // Add various event listeners

        // 1. before-render (Dynamically changes the Title of this Spec)
        docEl.addEventListener('before-render', (e) => {
          e.detail.spec.info.title = "EVENTS - This text is updated during `before-render` event";
        });

        // 2. before-try (Adds a querystring param to all GET calls)
        docEl.addEventListener('before-try', (e) => {
          if (e.detail.request.method === 'GET') {
            const url = new URL( e.detail.request.url);
            url.searchParams.append('delay', '3');
            e.detail.request.url = url.searchParams.toString();
          }
        });

        // 3. before-try (Aborts all post calls)
        docEl.addEventListener('before-try', (e) => {
          if (e.detail.request.method === 'POST') {
            e.detail.controller.abort();
          }
        });

        // 4. after-try
        docEl.addEventListener('after-try', (e) => {
          console.log("Hello from 'after-try' event ");
        });

        // 5. request-aborted
        docEl.addEventListener('request-aborted', (e) => {
          calert("POST Requests are aborted in 'before-try' event ");
        });

      })
    </script>
  </body>

</html>