Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hankhank10/alpine-fetch
Straightforward interactive HTTP requests from within your Alpine.JS markup
https://github.com/hankhank10/alpine-fetch
alpinejs
Last synced: about 1 month ago
JSON representation
Straightforward interactive HTTP requests from within your Alpine.JS markup
- Host: GitHub
- URL: https://github.com/hankhank10/alpine-fetch
- Owner: hankhank10
- License: gpl-3.0
- Created: 2022-06-23T22:31:40.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-09-24T10:13:01.000Z (about 1 year ago)
- Last Synced: 2024-08-02T07:13:40.380Z (4 months ago)
- Topics: alpinejs
- Language: JavaScript
- Homepage:
- Size: 90.8 KB
- Stars: 65
- Watchers: 4
- Forks: 3
- Open Issues: 4
-
Metadata Files:
- Readme: readme.md
- Contributing: CONTRIBUTING.md
Awesome Lists containing this project
- awesome - Alpine $fetch - A magic helper to integrate HTTP fetch requests directly within Alpine.js markup
README
# Alpine Fetch
Straightforward interactive HTTP requests from within your [Alpine.JS](https://alpinejs.dev/) markup.
[View the live demo here](https://hankhank10.github.io/alpine-fetch/)
## What does this do?
Alpine.JS is a rugged, minimal tool for composing behavior directly in your markup. It can be used, even by those with little experience in Javascript, to add interactivity to web pages.
Alpine Fetch is a magic helper for Alpine.JS which makes it easy to do HTTP requests within markup.
### Native Alpine approach to HTTP requests
One area where Alpine does require you to go outside markup is when making HTTP requests to dynamically populate parts of the page.
Someone looking to make a call on an API endpoint, might need to do something like the following:
````html
````
... which is quite verbose, and involves promises which are not straightforward for beginners.
### Alpine Fetch
Alpine Fetch adds magic functions to abstract a lot of this away and makes it much more straightforward to populate your page via HTTP requests. The above example using Alpine Fetch would be:
````html
````
Alpine Fetch can fetch simple text from the server using the `$fetch` method or it can fetch and parse JSON using the `$fetchjson` method.
It supports all HTTP methods such as `GET` and `POST` and `PUT`.
It has no dependencies other than Alpine.
## Installation
Include the following `` tag in the `<head>` of your document, **before** Alpine:
```html
<script defer src="https://cdn.jsdelivr.net/gh/hankhank10/alpine-fetch@main/alpine-fetch.js">
```
## Usage
At its most basic `$fetch` accepts a URL and returns the contents of that URL.
Unlike the generic Javascript `fetch` method which requires dealing with promises, this simply waits for the response to be received and then returns it.
`$fetch` should be preceded by `await` to ensure that this happens.
### String to x-text
The most basic example is to fetch a string from the server and populate it in your markup via the `x-text` method of alpine.
```html
```
### HTML to x-html
The `$fetch` helper can be used anywhere, so if you don't want to render it as text you can pass it to the `x-html` method of Alpine - or to a class, or any other part of the markup. It behaves like any other variable.
```html
```
### Retrieving once, using multiple times
You might want to use the same data in multiple places in your markup. In that case, it would make sense to just fetch it once and use it multiple times. You can do this by retrieving it into the `x-data` tag like any other variable.
```html
```
### Retrieving JSON
`$fetch` retrieves data which it expects to be text, but you can also use `$fetchjson` to retrieve data which is JSON and then render the relevant part of that into your page.
```html
```
### Specifying a method
`$fetch` and `$fetchjson` assume that you want to use a `GET` method but you can specify that you want to send another.
````html
````
### Responding to actions
If you specify a DOM element or a variable to be equal to `$fetch` or `$fetchjson` then the methods will automatically fetch on init.
However you can also customise when they do the fetch however you like. In the below example, it will fetch only when the user clicks the button.
````html
The weather is
Click me to change the weather
````
### Examples
You can view all of these examples in the `docs/index.html` file in this repo, or view a live hosted demo [here](https://hankhank10.github.io/alpine-fetch/examples/examples.html).
## Contributing
I very much welcome comments, suggestions and contributions.
If you notice issues please open an issue on Github.
If you have improvements or suggestions please submit a pull request.