Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/marcisbee/radi-fetch
Official HTTP client for Radi.js
https://github.com/marcisbee/radi-fetch
ajax client fetch http radi radijs
Last synced: about 1 month ago
JSON representation
Official HTTP client for Radi.js
- Host: GitHub
- URL: https://github.com/marcisbee/radi-fetch
- Owner: Marcisbee
- License: mit
- Created: 2018-03-13T13:56:57.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-04-05T09:13:44.000Z (over 1 year ago)
- Last Synced: 2024-11-09T22:41:25.368Z (about 1 month ago)
- Topics: ajax, client, fetch, http, radi, radijs
- Language: JavaScript
- Homepage: https://radi.js.org
- Size: 33.2 KB
- Stars: 3
- Watchers: 3
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# radi-fetch
`radi-fetch` is the official HTTP client for [Radi.js](https://radi.js.org). It deeply integrates with Radi for seamless application building.
[](https://www.npmjs.com/package/radi-fetch)
[](https://www.npmjs.com/package/radi-fetch)
[](https://unpkg.com/radi-fetch@latest/dist/radi-fetch.js)
[](https://discord.gg/a62gfaDW2e)
## Installation
To install the stable version:
```
npm install --save radi-fetch
```
This assumes you are using [npm](https://www.npmjs.com/) as your package manager.
If you're not, you can [access these files on unpkg](https://unpkg.com/radi-fetch/dist/), download them, or point your package manager to them.
#### Browser Compatibility
`radi-fetch` currently is compatible with browsers that support ES5.
## Getting started
Here is how it works. We start by initiating plugin for Radi `Radi.plugin(/* radi-fetch */, /* config */)`. Config here is optional, but we can define crucial parts of http client.
```jsx
import RadiFetch from 'radi-fetch'
Radi.plugin(RadiFetch)
```
or
```jsx
import RadiFetch from 'radi-fetch'
Radi.plugin(RadiFetch, {
/* We can define base url */
baseUrl: 'https://example.com',
/* We can define headers */
headers: {
'Authorization': 'key',
},
/* We can define dummy data that will be returned for requests made with radi-fetch */
dummy: true, // Should return dummy data or use real requests
dummyTimeout: 1000, // Dummy data latency simulation
dummyData: { // Actual dummy data
get: {
'/api': {
hello: 'world',
},
},
},
});
```
That's it, we're ready to go. We can start fetching our api or whatever we want by using fetch by `$fetch[type](url, params, headers)` handle.
Response can be automatically parsed as JSON by using `.json()` method, or `.text()` for plain text response.
```jsx
class MyComponent extends Radi.Component {
on() {
return {
mount() {
this.$fetch.get('/test')
.then(response => {
console.log(response.json())
})
.catch(error => {
console.log('Got some', error)
})
}
}
}
}
```
Fetch automatically sets loading state for any ongoing request. We can listen to them in radi using `$loading` handle.
```jsx
/* @jsx Radi.r */
class MyComponent extends Radi.Component {
view() {
return (
- /api is { this.$loading.state['/api'] ? 'loading' : 'ready' }
- Number of active requests: { this.$loading.state.$count }
- Anything loading: { this.$loading.state.$any }
)
}
}
```
## Stay In Touch
- [Twitter](https://twitter.com/radi_js)
- [Slack](https://join.slack.com/t/radijs/shared_invite/enQtMjk3NTE2NjYxMTI2LWFmMTM5NTgwZDI5NmFlYzMzYmMxZjBhMGY0MGM2MzY5NmExY2Y0ODBjNDNmYjYxZWYxMjEyNjJhNjA5OTJjNzQ)
## License
[MIT](http://opensource.org/licenses/MIT)
Copyright (c) 2018-present, Marcis (Marcisbee) Bergmanis