Fitted

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