Fitted

Tailliert

Verwenden Sie ECMAScript-Dekoratoren (derzeit ein Vorschlag der Stufe 2), um HTTP-Anfragen auszuführen und die Verarbeitung von Antworten zu verwalten. Dies ist eine einfache und lesbare Möglichkeit, den Datenfluss durch die Netzwerkschicht Ihrer Anwendung zu verwalten.

Beispiel

Zwei Hauptteile: die Methodendekoratoren, die die Anfrage tatsächlich bearbeiten, und die Klassendekoratoren, mit denen Sie steuern können, wie Antworten vom Server transformiert und verarbeitet werden.

Das einfachste Beispiel ist nur ein Datenabruf von einem JSON-Endpunkt:

 import { get } from 'fitted' ;

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

Und holen Sie:

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

Verwendung

Grundlegende Anfrage

Mit dem get -Decorator können Sie eine GET -Anfrage auslösen:

 import { get } from 'fitted' ;

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

Parameter zusammenführen

Um Parameter mit der URL zusammenzuführen, verwenden wir die URL-Vorlage, die geschweifte Klammern verwendet, um eine zusammenzuführende Variable zu kapseln.

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

Basis-URL

In den meisten Fällen verwenden Ihre Endpunkte dieselbe Basis-URL. Mit Fitted können Sie daher eine Basis-URL festlegen, die allen in Ihren Methodendekoratoren festgelegten Pfaden vorangestellt wird.

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

Daten senden

Um Daten zu Ihrer Anfrage für post , put und destroy -Anfragen hinzuzufügen und eine Abfragezeichenfolge für Ihre get -Anfrage anzugeben, fügen Sie Ihrer Anfragedefinition ein data hinzu.

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

Dekoration anfordern

Oftmals haben alle Endpunkte die gleichen Anforderungsanforderungen, sodass beispielsweise für alle ein Header festgelegt sein muss. Hierzu kann der @request -Decorator verwendet werden. Es ruft die Konfiguration jeder übergebenen Anfrage ab, bevor es sie an den Treiber übergibt.

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

Antwortverarbeitung

Wenn der Server mit einem Content-Type -Header antwortet application/json enthält, leitet Fitted ihn automatisch an die JSON.parse -Funktion weiter, sodass das resultierende Promise das entsprechende Objekt ausgibt.

Jeder andere Content-Type führt zu einem Fehler und erfordert, dass Sie Ihren eigenen Handler implementieren.

Benutzerdefinierter Antwortprozessor

Wenn Ihr Endpunkt etwas zurückgibt, das eine gewisse Vorverarbeitung erfordert, können Sie in Ihrer API-Definition einen Prozessor für alle Endpunkte definieren. Dies besteht aus einer Funktion, die die Antwort vom Server empfängt und die analysierten Daten an das Antwortobjekt weitergibt.

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