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 [email protected]:Fdom92/stencil-fetch.git
cd my-app
git remote rm originand run:
npm install
npm startUsing 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();