Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jblaak/fitted
Simplifying http requests using ES decorators
https://github.com/jblaak/fitted
ajax decorators http-requests
Last synced: about 2 hours ago
JSON representation
Simplifying http requests using ES decorators
- Host: GitHub
- URL: https://github.com/jblaak/fitted
- Owner: JBlaak
- Created: 2016-05-28T19:35:11.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2016-12-23T12:58:15.000Z (almost 8 years ago)
- Last Synced: 2024-11-07T10:46:01.123Z (12 days ago)
- Topics: ajax, decorators, http-requests
- Language: JavaScript
- Homepage:
- Size: 104 KB
- Stars: 135
- Watchers: 4
- Forks: 5
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Fitted
====
[](https://travis-ci.org/JBlaak/Fitted)
Use ECMAScript decorators ([currently a Stage 2 proposal](https://github.com/tc39/proposals)) to
execute HTTP requests and manage processing of responses, an easy and readable way of managing
how data flows through the networking layer of your application.
Example
----
Two main parts, the method decorators which will actually do the request, and the class decorators
which will allow you to handle the way responses from the server are transformed and handled.
The simplest example is just a fetch of data from a JSON endpoint:
```javascript
import {get} from 'fitted';
class HackerNews {
@get('https://hacker-news.firebaseio.com/v0/topstories.json')
topstories (request, response) {
return request({}, response);
}
}
```
And fetch:
```javascript
const hackerNews = new HackerNews();
const topstories = await hackerNews.topstories();
console.log(topstories);
```
Usage
-----
__Basic request__
Using the `get` decorator you can trigger a `GET` request:
```javascript
import {get} from 'fitted';
class HackerNews {
@get('https://hacker-news.firebaseio.com/v0/topstories.json')
topstories (request, response) {
return request({}, response);
}
}
```
**Merging params**
To merge params with the url we use [url-template](https://github.com/bramstein/url-template),
which uses curly brackets to encapsulate a to be merged variable.
```javascript
import {get} from 'fitted';
class HackerNews {
@get('https://hacker-news.firebaseio.com/v0/item/{id}.json')
item (id, request, response) {
return request({
template: {
id: 123
}
}, response);
}
}
```
**Base url**
Most of the time your endpoints will share the same base url, so Fitted
allows you to set a base url which will be prefixed to all paths
set in your method decorators.
```javascript
import {base, get} from 'fitted';
@base('https://hacker-news.firebaseio.com/v0/')
class HackerNews {
@get('item/{id}.json')
item (id, request, response) {
return request({
template: {
id: 123
}
}, response);
}
}
```
__Sending data__
To add data to your request for `post`, `put` and `destroy` requests and
specifying a query string for your `get` request you add a `data` object
to your request definition.
```javascript
import {put} from 'fitted';
class HackerNews {
@put('https://hacker-news.firebaseio.com/v0/item/{id}.json')
item (id, name, request, response) {
return request({
template: {
id: 123
},
data: {
name: name
}
}, response);
}
}
```
__Request decorating__
Often all endpoints will have the same request requirements, requiring,
for example, all to have some header set. For this the `@request`
decorator can be used. It will get the config of each request
passed before handing it over to the driver.
```javascript
import {get, request} from 'fitted';
const myRequestHandler = config => {
config.headers = {
'accept': 'application/json'
}
return config;
}
@request(myRequestHandler)
class HackerNews {
@get('item/{id}.json')
item (id, request, response) {
return request({
template: {
id: id
}
}, response);
}
}
```
__Response handling__
When the server responds with a `Content-Type` header containing `application/json`
Fitted will automatically feed it to the `JSON.parse` function so that
the resulting Promise will output the corresponding object.
Any other `Content-Type` will result in an Error being thrown and require
you to implement your own handler.
**Custom response processor**
When your endpoint returns something that requires some pre-processing you
can define a processor for all endpoints in your api definition. This
consists of a function that receives the response from the server and
passes the parsed data to the response object.
```javascript
import {get, processor} from 'fitted';
const myProcessor = response => {
const data = JSON.parse(response.getBody());
response.setBody(data);
return data;
}
@processor(myProcessor)
class HackerNews {
@get('item/{id}.json')
item (id, request, response) {
return request({
template: {
id: id
}
}, response);
}
}
```