hyper fetch

주요 기능

? 간단한 설정 - 더 읽어보십시오

쉬운 취소 - 더 읽어보십시오

유사한 요청을 제거하십시오 - 더 읽기

대기열 - 더 읽어보십시오

? 응답 캐싱 - 더 읽기

? 오프라인 먼저 - 더 읽기

? 내장 Fetcher- 더 읽기

? 인증 - 더 읽어보십시오

? 스마트 리치 - 더 읽어보십시오

이 프로젝트 작업을 계속하도록 도와주세요

• Github의 후원자가 되십시오

설치

최신 버전의 Hyper Fetch를 얻는 가장 쉬운 방법은 원사 또는 NPM을 통해 설치하는 것입니다.

핵심

npm install --save @hyper-fetch/core
or
yarn add @hyper-fetch/core

소켓

npm install --save @hyper-fetch/sockets
or
yarn add @hyper-fetch/sockets

반응

npm install --save @hyper-fetch/core @hyper-fetch/react
or
yarn add @hyper-fetch/core @hyper-fetch/react

패키지

패키지	통계
하이퍼 페치
소켓
반응
중포 기지
파이어베이스 관리자
그래프 QL
axios
Codegen Openapi

예

간단한 설정

 import { Client } from "@hyper-fetch/core" ;

// Setup our connection to the server
export const client = new Client ( { url : "http://localhost:3000" } ) ;

// Create reusable requests for later use
export const postData = client . createRequest < ResponseType , RequestType , LocalErrorType , QueryParamsType > ( ) ( {
  method : "POST" ,
  endpoint : "/data/:accountId" ,
} ) ;

export const getData = client . createRequest < ResponseType , RequestType , LocalErrorType , QueryParamsType > ( ) ( {
  method : "GET" ,
  endpoint : "/user" ,
} ) ; 

가져 오기

이전에 준비된 요청을 실행하는 것은 매우 간단합니다. 보내기 메소드를 사용하여이를 수행 할 수 있습니다.

 const { data , error , status } = await getData . send ( ) ; 

돌연변이 요청

메서드를 서버로 전송하기 전에 메소드와 함께 요청에 데이터를 첨부 할 수 있습니다. 이는 요청을 구축하고 데이터를 첨부하여 데이터를 첨부하여 일부 프로세스 중에 얻은 데이터에서 몇 단계로 만들어야 할 때 도움이 될 수 있습니다.

 // Set the information to request (methods return request clone - NOT mutating the source)
const request = postData
  . setParams ( { accountId : 104 } ) // Set Params
  . setQueryParams ( { paramOne : "test" , paramTwo : "test2" } )
  . setData ( { name : "My new entity" , description : "Some description" } ) // Add payload data
  . send ( ) ;

또한 보내기 메소드에 직접 전달할 수 있으며,이를 요청에 한 번에 추가합니다.

 // OR pass dynamic data directly to '.send' method
const { data , error , status } = await postData . send ( {
  params : { accountId : 104 } ,
  data : { name : "My new entity" , description : "Some description" } ,
  queryParams : { paramOne : "test" , paramTwo : "test2" } ,
} ) ; 

반응

수명주기로 가져 오십시오

예시를 보여주세요

 import { useFetch } from "@hyper-fetch/react" ;

// Lifecycle fetching
const { data , error , loading , onSuccess , onError } = useFetch ( getData ) ;

onSuccess ( ( data ) => {
  console . log ( data ) ;
} ) ;

onError ( ( error ) => {
  console . log ( error ) ;
} ) ; 

수동으로 요청을 트리거합니다

예시를 보여주세요

 import { useSubmit } from "@hyper-fetch/react" ;

const { submit , data , error , submitting , onSubmitSuccess , onSubmitError } = useSubmit ( request ) ;

onSuccess ( ( data ) => {
  console . log ( data ) ;
} ) ;

onError ( ( error ) => {
  console . log ( error ) ;
} ) ;

return < button onClick = { ( ) => submit ( ) } > Trigger request! </ button > ; 

동적 데이터를 전달하여 방법을 제출하십시오

예시를 보여주세요

 import { useSubmit } from "@hyper-fetch/react" ;

const { submit , data , error , submitting , onSubmitSuccess , onSubmitError } = useSubmit ( request ) ;

onSuccess ( ( data ) => {
  console . log ( data ) ;
} ) ;

onError ( ( error ) => {
  console . log ( error ) ;
} ) ;

return (
  < button
    onClick = { ( ) =>
      submit ( {
        params : { accountId : 104 } ,
        data : { name : "My new entity" , description : "Some description" } ,
        queryParams : { paramOne : "test" , paramTwo : "test2" } ,
      } )
    }
  >
    Trigger request!
  </ button >
) ; 

제출 약속 응답을 사용하십시오

예시를 보여주세요

 import { useSubmit } from "@hyper-fetch/react" ;

// Manual triggering
const { submit , data , error , submitting , onSubmitSuccess , onSubmitError } = useSubmit ( request ) ;

onSuccess ( ( data ) => {
  console . log ( data ) ;
} ) ;

onError ( ( error ) => {
  console . log ( error ) ;
} ) ;

const handleSubmit = ( values : ValuesType , { setSubmitting } : FormikHelpers ) => {
  const { data , error , status } = await submit ( ) ; // Submit method returns data!
  setSubmitting ( false ) ;
  if ( data ) {
    notification . success ( "Done!" , data ) ;
  } else {
    notification . success ( "Error!" , error ) ;
  }
} ;

return < Form onSubmit = { handleSubmit } > ... </ Form > ;

더 많은 예를 찾으십시오

? 우리의 후원자

확장하다