Fitted

장착됨

ECMAScript 데코레이터(현재 2단계 제안)를 사용하여 HTTP 요청을 실행하고 응답 처리를 관리합니다. 이는 애플리케이션의 네트워킹 계층을 통해 데이터가 흐르는 방식을 관리하는 쉽고 읽기 쉬운 방법입니다.

예

두 가지 주요 부분은 실제로 요청을 수행하는 메서드 데코레이터와 서버의 응답을 변환하고 처리하는 방식을 처리할 수 있는 클래스 데코레이터입니다.

가장 간단한 예는 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 ) ;
    }
}

매개변수 병합

매개변수를 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 ) ;
    }
}