hyper fetch

Fitur utama

? Pengaturan Sederhana - Baca lebih lanjut

Pembatalan mudah - Baca lebih lanjut

Deduplikat permintaan serupa - Baca lebih lanjut

Antrian - Baca lebih lanjut

? Caching Respons - Baca lebih lanjut

? Offline First - Baca lebih lanjut

? Fetcher bawaan - Baca lebih lanjut

? Otentikasi - Baca lebih lanjut

? Smart Retries - Baca lebih lanjut

Bantu saya terus mengerjakan proyek ini ❤️

• Menjadi sponsor di GitHub

Instalasi

Cara termudah untuk mendapatkan versi terbaru dari Hyper Fetch adalah dengan menginstalnya melalui benang atau NPM.

Inti

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

Soket

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

Bereaksi

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

Paket

Kemasan	Statistik
Hyper fetch
Soket
Bereaksi
Firebase
Admin Firebase
Graphql
Axios
Codegen OpenAPI

Contoh

Pengaturan Sederhana

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

Pengambilan

Melaksanakan permintaan yang sebelumnya siap sangat sederhana. Kita dapat melakukan ini dengan menggunakan metode kirim.

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

Permintaan mutasi

Kami dapat melampirkan data ke permintaan dengan metode sebelum mengirimnya ke server. Ini bermanfaat untuk membangun permintaan kami dan melampirkan data ke dalamnya yang dapat membantu ketika kami perlu membuatnya dalam beberapa langkah dari data yang diperoleh selama beberapa proses.

 // 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 ( ) ;

Kami juga dapat meneruskannya langsung ke metode Kirim, yang akan menambahkannya ke permintaan sekaligus.

 // 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" } ,
} ) ; 

Bereaksi

Ambil dengan siklus hidup

Tunjukkan contoh

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

Memicu permintaan secara manual

Tunjukkan contoh

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

Lulus data dinamis untuk mengirimkan metode

Tunjukkan contoh

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

Gunakan Kirim Tanggapan Janji

Tunjukkan contoh

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

Cari tahu lebih banyak contoh

? Sponsor kami

Memperluas