<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 installRunning the demo locally
npm startRunning the tests
npm test