Fitted

Equipado

Use decoradores ECMAScript (atualmente uma proposta do Estágio 2) para executar solicitações HTTP e gerenciar o processamento de respostas, uma maneira fácil e legível de gerenciar como os dados fluem pela camada de rede do seu aplicativo.

Exemplo

Duas partes principais, os decoradores de método que realmente farão a solicitação, e os decoradores de classe que permitirão lidar com a forma como as respostas do servidor são transformadas e tratadas.

O exemplo mais simples é apenas uma busca de dados de um endpoint JSON:

 import { get } from 'fitted' ;

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

E busque:

 const hackerNews = new HackerNews ( ) ;
const topstories = await hackerNews . topstories ( ) ;
console . log ( topstories ) ; 

Uso

Solicitação básica

Usando o decorador get você pode acionar uma solicitação GET :

 import { get } from 'fitted' ;

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

Mesclando parâmetros

Para mesclar parâmetros com o URL, usamos url-template, que usa colchetes para encapsular uma variável a ser mesclada.

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

URL base

Na maioria das vezes, seus endpoints compartilharão o mesmo URL base, então Fitted permite que você defina um URL base que será prefixado para todos os caminhos definidos em seus decoradores de método.

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

Enviando dados

Para adicionar dados à sua solicitação de post , put e destroy solicitações e especificar uma string de consulta para sua solicitação get , você adiciona um objeto data à sua definição de solicitação.

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

Solicitar decoração

Muitas vezes todos os endpoints terão os mesmos requisitos de solicitação, exigindo, por exemplo, que todos tenham algum conjunto de cabeçalhos. Para isso pode ser utilizado o decorador @request . Ele obterá a configuração de cada solicitação aprovada antes de entregá-la ao 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 ) ;
    }
}

Tratamento de respostas

Quando o servidor responder com um cabeçalho Content-Type contendo application/json Fitted irá alimentá-lo automaticamente para a função JSON.parse para que a Promise resultante produza o objeto correspondente.

Qualquer outro Content-Type resultará em um erro e exigirá que você implemente seu próprio manipulador.

Processador de resposta personalizado

Quando seu endpoint retorna algo que requer algum pré-processamento, você pode definir um processador para todos os endpoints em sua definição de API. Consiste em uma função que recebe a resposta do servidor e passa os dados analisados ​​para o objeto de resposta.

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