async-data v0.1.1
async-data
Declarative ajax.
install
npm install async-data
usage
First, load the polyfill:
<script src='node_modules/webcomponents.js/webcomponents.js
Import the element:
<link rel="import" href="component/async-data.html">
Instantiate it:
<async-data src='https://someapi.com'></async-data>
Data is fetched from the resource indicated by the src
attribute.
If the element has an auto
attribute, the request is made as soon as document.readyState === 'complete'
is true
, and whenever the src
attribute is changed. Otherwise, the request can be triggered by calling the element's .get
method, which takes no arguments.
The element uses the browser-request package to fetch the data. When done, it emits a 'data' event. This is an instance of MessageEvent
, the .data
property of which is set to the body of the response.
An 'error' event is emitted if there is an error, be it a network error, or a 404, or something else. This is an instance of ErrorEvent
, whose .message
property is set to the value of the .message
property of the underlying error object, and whose .error
property is set to that error object itself. According to MDN, the .error
property of ErrorEvent
is experimental, but of course none of this is well documented, so if something blows up on you, please file an issue here.
The element's .value
property holds the requested data, if the call succeeds, and it's .error
property holds an error object if there was an error making the request.
See index.html for an example.
Feedback is welcome. For instance, is it efficient to pass the retrieved data as the .data
property of the data event? This technique was inspired by the way Server-Sent Events work, and I like it. Listeners can of course query event.target.data
to get the same data. I'm not familiar with the way memory is handled in this case, and so would welcome any input.