stencil-fetch

stencil-fetch is a web component built with Stencil that allows you to use the Fetch API.

Getting Started

To try this component:

git clone git@github.com:Fdom92/stencil-fetch.git
cd my-app
git remote rm origin

and run:

npm install
npm start

Using this component

Script tag

Put <script src='https://unpkg.com/stencil-fetch@latest/dist/fetch.js'></script> in the head of your index.html
Then you can use the component

Node Modules

Run npm install stencil-fetch --save
Put a script tag similar to this <script src='node_modules/stencil-fetch/dist/fetch.js></script> in the head of your index.html
Then you can use the component

In a stencil-starter app

Run npm install stencil-fetch --save
Add { name: 'stencil-fetch' } to your collections
Then you can use the component

Parameters

Attribute	Default	Description
headers	{}	Headers for the request
method	'GET'	The method for the request (GET, POST...)
url	''	The URL to make the request
buttonLabel	Fetch	The button label

Methods

You can make the request anytime with the method makeRequest like this:

element = document.querySelector('st-fetch');
element.makeRequest();

Events

You can listen for the resolved or error events like:

element = document.querySelector('st-fetch');
element.addEventListener('resolved', function(e){console.log(e);})

And you will see the event on the console after ok or error.

resolved

This event will be emitted when all goes OK

error

This event will be emitted when an error ocurred

Example

After addingthis to your code:

<st-fetch url="https://jsonplaceholder.typicode.com/posts"></st-fetch>

You can do this to make a request and get the event:

element = document.querySelector('st-fetch');
element.addEventListener('resolved', function(event){
    // Do whatever you want with the event
});
element.addEventListener('error', function(event){
    // Do whatever you want with the event
});
element.makeRequest();