Fetch API implementation with Stenciljs
MIT License
stencil-fetch is a web component built with Stencil that allows you to use the Fetch API.
To try this component:
git clone [email protected]:Fdom92/stencil-fetch.git
cd my-app
git remote rm origin
and run:
npm install
npm start
<script src='https://unpkg.com/stencil-fetch@latest/dist/fetch.js'></script>
in the head of your index.htmlnpm install stencil-fetch --save
<script src='node_modules/stencil-fetch/dist/fetch.js></script>
in the head of your index.htmlnpm install stencil-fetch --save
{ name: 'stencil-fetch' }
to your collections
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 |
You can make the request anytime with the method makeRequest
like this:
element = document.querySelector('st-fetch');
element.makeRequest();
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.
This event will be emitted when all goes OK
This event will be emitted when an error ocurred
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();