Fitted

Equipado

Utilice decoradores ECMAScript (actualmente una propuesta de Etapa 2) para ejecutar solicitudes HTTP y administrar el procesamiento de respuestas, una forma fácil y legible de administrar cómo fluyen los datos a través de la capa de red de su aplicación.

Ejemplo

Dos partes principales, los decoradores de métodos que realmente realizarán la solicitud y los decoradores de clases que le permitirán manejar la forma en que se transforman y manejan las respuestas del servidor.

El ejemplo más simple es simplemente recuperar datos de un punto final JSON:

 import { get } from 'fitted' ;

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

Y buscar:

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

Uso

Solicitud básica

Usando el decorador get puedes activar una solicitud GET :

 import { get } from 'fitted' ;

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

Fusionar parámetros

Para fusionar parámetros con la URL utilizamos url-template, que utiliza llaves para encapsular una variable que se va a fusionar.

 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 básica

La mayoría de las veces, sus puntos finales compartirán la misma URL base, por lo que Fitted le permite establecer una URL base que tendrá como prefijo todas las rutas establecidas en sus decoradores de métodos.

 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 datos

Para agregar datos a su solicitud de post , put y destroy solicitudes y al especificar una cadena de consulta para su solicitud get , agrega un objeto data a la definición de su solicitud.

 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 decoración

A menudo, todos los puntos finales tendrán los mismos requisitos de solicitud, lo que requerirá, por ejemplo, que todos tengan algún encabezado establecido. Para ello se puede utilizar el decorador @request . Obtendrá la configuración de cada solicitud aprobada antes de entregársela al controlador.

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

Manejo de respuestas

Cuando el servidor responde con un encabezado Content-Type que contiene application/json Fitted, lo enviará automáticamente a la función JSON.parse para que la Promesa resultante genere el objeto correspondiente.

Cualquier otro Content-Type generará un error y requerirá que implemente su propio controlador.

Procesador de respuesta personalizado

Cuando su punto final devuelve algo que requiere algún procesamiento previo, puede definir un procesador para todos los puntos finales en su definición de API. Consiste en una función que recibe la respuesta del servidor y pasa los datos analizados al objeto de respuesta.

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