Request events

Fired on the element that has the fetch attributes. They do not bubble, so handle them on that element: onload="…" in component markup, or addEventListener.

<button fetch="/api/items" into="#list.items" onload="notify(event.detail.status)" onerror="fail(event.detail)">Load</button>

Events

Event Cancelable When detail
loadstart yes Before the request is sent. preventDefault() (or return false in a handler) stops it { url: string, method: string }
load no A 2xx response, after into and render were applied { status: number, data: unknown, headers: Headers, url: string }
error no A non-2xx response { status: number, data: unknown, headers: Headers, url: string }
error no A network failure { status: 0, data: undefined, message: string, url: string }
abort no A newer request from the same element replaced this one, or the element was removed { url: string }
timeout no The timeout elapsed { url: string }
loadend no After every request that started, whatever the outcome { url: string }

data is the parsed JSON when the response's Content-Type contains json, otherwise the response text. url in load and error is the final response URL after redirects. In the other events it is the request URL including the query string.

Order

loadstart → (load | error | abort | timeout) → loadend

A cancelled loadstart sends nothing and fires nothing else.

Example

Previewindex.htmlevent-log.html
Send a request 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Request events demo</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@realmorg/realm@alpha/dist/realm.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@realmorg/ui@alpha/dist/theme.css">
  <script type="module" src="https://cdn.jsdelivr.net/npm/@realmorg/realm@alpha/dist/realm.js"></script>
</head>
<body>
  <import-element from="https://cdn.jsdelivr.net/npm/@realmorg/ui@alpha/components/button.html"></import-element>

  <import-element from="./event-log.html"></import-element>

  <event-log></event-log>
</body>
</html>
<custom-element name="event-log">
  <script>
    const log = useState({ lines: [] });

    function note(event) {
      log.lines.push(`${event.type}${event.detail.status ? ` ${event.detail.status}` : ""}`);
    }
  </script>

  <style>
    :host {
      display: grid;
      gap: calc(var(--spacing) * 2);
      justify-items: start;
    }
    ol {
      margin: 0;
    }
  </style>

  <ui-button fetch="http://realm.js.org/search-index.json" onloadstart="note(event)" onload="note(event)" onloadend="note(event)">Send a request</ui-button>
  <ol><li repeat="#log.lines" as="line"><slot name="#line"></slot></li></ol>
</custom-element>

Edit this page on GitHub · View as Markdown