Fitted

フィットした

ECMAScript デコレータ (現在はステージ 2 提案) を使用して、HTTP リクエストを実行し、応答の処理を管理します。これは、アプリケーションのネットワーク層を介してデータがどのように流れるかを管理する簡単で読みやすい方法です。

例

2 つの主要な部分、実際にリクエストを実行するメソッド デコレータと、サーバーからの応答を変換して処理する方法を処理できるクラス デコレータです。

最も単純な例は、JSON エンドポイントからのデータのフェッチです。

 import { get } from 'fitted' ;

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

そしてフェッチします:

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

使用法

基本的なお願い

getデコレータを使用すると、 GETリクエストをトリガーできます。

 import { get } from 'fitted' ;

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

パラメータのマージ

params を URL とマージするには、url-template を使用します。これは、中括弧を使用してマージされる変数をカプセル化します。

 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

ほとんどの場合、エンドポイントは同じベース URL を共有するため、Fitted を使用すると、メソッド デコレータに設定されているすべてのパスにプレフィックスとして付けられるベース URL を設定できます。

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

データの送信

post 、 put 、 destroyリクエストのリクエストにデータを追加し、 getリクエストのクエリ文字列を指定するには、リクエスト定義にdataオブジェクトを追加します。

 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デコレータを使用できます。ドライバーに渡す前に、渡された各リクエストの構成を取得します。

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

応答の処理

サーバーがapplication/json含むContent-Typeヘッダーで応答すると、Fitted はそれを自動的にJSON.parse関数にフィードし、結果の Promise が対応するオブジェクトを出力するようにします。

他のContent-Typeではエラーがスローされるため、独自のハンドラーを実装する必要があります。

カスタム応答プロセッサ

エンドポイントが前処理を必要とするものを返す場合、API 定義ですべてのエンドポイントのプロセッサを定義できます。これは、サーバーから応答を受信し、解析されたデータを応答オブジェクトに渡す関数で構成されます。

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