@advanced-rest-client/xhr-simple-request

An XHR request that works with API components

Usage no npm install needed!

<script type="module">
  import advancedRestClientXhrSimpleRequest from 'https://cdn.skypack.dev/@advanced-rest-client/xhr-simple-request';
</script>

README

Published on NPM

Build Status

Published on webcomponents.org

<xhr-simple-request>

An XHR request that works with API components.

It handles api-request and abort-api-request custom events that controls request flow in API components ecosystem.

<xhr-simple-request></xhr-simple-request>

API components

This components is a part of API components ecosystem

Usage

Installation

npm install --save @advanced-rest-client/xhr-simple-request

In an html file

<html>
  <head>
    <script type="module">
      import '@advanced-rest-client/xhr-simple-request/xhr-simple-request.js';
    </script>
  </head>
  <body>
    <xhr-simple-request></xhr-simple-request>
    <script>
    const request = {
      url: location.href,
      method: 'POST',
      headers: 'x-arc: true',
      payload: 'test body',
      id: 'request-unique-id'
    };
    const e = new CustomEvent('api-request', {
      detail: request,
      bubbles: true
    });
    document.body.dispatchEvent(e);
    window.addEventListener('api-response', (e) => {
      console.log(e.detail);
    });
    </script>
  </body>
</html>

In a LitElement template

import { LitElement, html } from 'lit-element';
import '@advanced-rest-client/xhr-simple-request/xhr-simple-request.js';

class SampleElement extends LitElement {
  render() {
    return html`
    <xhr-simple-request @api-response="${this._onResponse}"></xhr-simple-request>`;
  }

  _onResponse(e) {
    console.log(e.detail);
  }
}
customElements.define('sample-element', SampleElement);

In a Polymer 3 element

import {PolymerElement, html} from '@polymer/polymer';
import '@advanced-rest-client/xhr-simple-request/xhr-simple-request.js';

class SampleElement extends PolymerElement {
  static get template() {
    return html`
    <xhr-simple-request on-api-response="_onResponse"></xhr-simple-request>
    `;
  }

  send() {
    const request = {
      url: location.href,
      method: 'POST',
      headers: 'x-arc: true',
      payload: 'test body',
      id: 'request-unique-id'
    };
    const e = new CustomEvent('api-request', {
      detail: request,
      bubbles: true
    });
    document.body.dispatchEvent(e);
  }

  _onResponse(e) {
    console.log(e.detail);
  }
}
customElements.define('sample-element', SampleElement);

Development

git clone https://github.com/advanced-rest-client/xhr-simple-request
cd xhr-simple-request
npm install

Running the demo locally

npm start

Running the tests

npm test