hyper fetch

關鍵功能

？簡單設置- 閱讀更多

輕鬆取消- 閱讀更多

重複說明類似的請求- 閱讀更多

排隊- 閱讀更多

？響應緩存- 閱讀更多

？脫機- 閱讀更多

？內置fetcher-閱讀更多

？身份驗證- 閱讀更多

？智能重試- 閱讀更多

幫助我繼續從事這個項目❤️

• 成為Github上的讚助商

安裝

獲得最新版本的HyperFetch的最簡單方法是通過紗線或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

軟件包

包裹	統計
超級獲取
插座
反應
火基
firebase管理員
GraphQl
軸
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 > ;

查找更多示例

？我們的讚助商

展開