Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

Fitted

Build Status

Use ECMAScript decorators (currently a Stage 2 proposal) 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:

import {get} from 'fitted';

class HackerNews {
    @get('https://hacker-news.firebaseio.com/v0/topstories.json')
    topstories (request, response) {
      return request({}, response);
    }
}

And fetch:

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:

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, which uses curly brackets to encapsulate a to be merged variable.

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.

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.

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.

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.

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);
    }
}

About

Simplifying http requests using ES decorators

Topics

Resources

Packages

No packages published
You can’t perform that action at this time.