1 | # radi-fetch
|
2 |
|
3 | `radi-fetch` is the official HTTP client for [Radi.js](https://radi.js.org). It deeply integrates with Radi for seamless application building.
|
4 |
|
5 | [![npm version](https://img.shields.io/npm/v/radi-fetch.svg?style=flat-square)](https://www.npmjs.com/package/radi-fetch)
|
6 | [![npm downloads](https://img.shields.io/npm/dm/radi-fetch.svg?style=flat-square)](https://www.npmjs.com/package/radi-fetch)
|
7 | [![gzip bundle size](http://img.badgesize.io/https://unpkg.com/radi-fetch@latest/dist/radi-fetch.min.js?compression=gzip&style=flat-square)](https://unpkg.com/radi-fetch@latest/dist/radi-fetch.js)
|
8 | [![radi workspace on slack](https://img.shields.io/badge/slack-radijs-3eb891.svg?style=flat-square)](https://join.slack.com/t/radijs/shared_invite/enQtMjk3NTE2NjYxMTI2LWFmMTM5NTgwZDI5NmFlYzMzYmMxZjBhMGY0MGM2MzY5NmExY2Y0ODBjNDNmYjYxZWYxMjEyNjJhNjA5OTJjNzQ)
|
9 |
|
10 |
|
11 | ## Installation
|
12 |
|
13 | To install the stable version:
|
14 |
|
15 | ```
|
16 | npm install --save radi-fetch
|
17 | ```
|
18 |
|
19 | This assumes you are using [npm](https://www.npmjs.com/) as your package manager.
|
20 |
|
21 | 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.
|
22 |
|
23 | #### Browser Compatibility
|
24 |
|
25 | `radi-fetch` currently is compatible with browsers that support ES5.
|
26 |
|
27 | ## Getting started
|
28 |
|
29 | 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.
|
30 |
|
31 | ```jsx
|
32 | import RadiFetch from 'radi-fetch'
|
33 |
|
34 | Radi.plugin(RadiFetch)
|
35 | ```
|
36 |
|
37 | or
|
38 |
|
39 | ```jsx
|
40 | import RadiFetch from 'radi-fetch'
|
41 |
|
42 | Radi.plugin(RadiFetch, {
|
43 | /* We can define base url */
|
44 | baseUrl: 'https://example.com',
|
45 |
|
46 | /* We can define headers */
|
47 | headers: {
|
48 | 'Authorization': 'key',
|
49 | },
|
50 |
|
51 | /* We can define dummy data that will be returned for requests made with radi-fetch */
|
52 | dummy: true, // Should return dummy data or use real requests
|
53 | dummyTimeout: 1000, // Dummy data latency simulation
|
54 | dummyData: { // Actual dummy data
|
55 | get: {
|
56 | '/api': {
|
57 | hello: 'world',
|
58 | },
|
59 | },
|
60 | },
|
61 | });
|
62 | ```
|
63 |
|
64 | 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.
|
65 | Response can be automatically parsed as JSON by using `.json()` method, or `.text()` for plain text response.
|
66 |
|
67 | ```jsx
|
68 | class MyComponent extends Radi.Component {
|
69 | on() {
|
70 | return {
|
71 | mount() {
|
72 | this.$fetch.get('/test')
|
73 | .then(response => {
|
74 | console.log(response.json())
|
75 | })
|
76 | .catch(error => {
|
77 | console.log('Got some', error)
|
78 | })
|
79 | }
|
80 | }
|
81 | }
|
82 | }
|
83 | ```
|
84 |
|
85 | Fetch automatically sets loading state for any ongoing request. We can listen to them in radi using `$loading` handle.
|
86 |
|
87 | ```jsx
|
88 | /* @jsx Radi.r */
|
89 |
|
90 | class MyComponent extends Radi.Component {
|
91 | view() {
|
92 | return (
|
93 | <ul>
|
94 | <li>/api is { this.$loading.state['/api'] ? 'loading' : 'ready' }</li>
|
95 | <li>Number of active requests: { this.$loading.state.$count }</li>
|
96 | <li>Anything loading: { this.$loading.state.$any }</li>
|
97 | </ul>
|
98 | )
|
99 | }
|
100 | }
|
101 | ```
|
102 |
|
103 | ## Stay In Touch
|
104 |
|
105 | - [Twitter](https://twitter.com/radi_js)
|
106 | - [Slack](https://join.slack.com/t/radijs/shared_invite/enQtMjk3NTE2NjYxMTI2LWFmMTM5NTgwZDI5NmFlYzMzYmMxZjBhMGY0MGM2MzY5NmExY2Y0ODBjNDNmYjYxZWYxMjEyNjJhNjA5OTJjNzQ)
|
107 |
|
108 | ## License
|
109 |
|
110 | [MIT](http://opensource.org/licenses/MIT)
|
111 |
|
112 | Copyright (c) 2018-present, Marcis (Marcisbee) Bergmanis
|