hyper fetch

คุณสมบัติที่สำคัญ

- การตั้งค่าอย่างง่าย - อ่านเพิ่มเติม

การยกเลิกง่าย - อ่านเพิ่มเติม

DEDUPLICATION คำขอที่คล้ายกัน - อ่านเพิ่มเติม

คิว - อ่านเพิ่มเติม

- การตอบสนองการแคช - อ่านเพิ่มเติม

- ออฟไลน์ก่อน - อ่านเพิ่มเติม

- Fetcher ในตัว - อ่านเพิ่มเติม

- การรับรองความถูกต้อง - อ่านเพิ่มเติม

- Smart Retries - อ่านเพิ่มเติม

ช่วยฉันทำงานต่อไปในโครงการนี้❤

• เป็นสปอนเซอร์เกี่ยวกับ 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

แพ็คเกจ

บรรจุุภัณฑ์	สถิติ
ดึงไฮเปอร์
ซ็อกเก็ต
ตอบโต้
ฐานไฟ
ผู้ดูแลระบบ 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 > ;

ค้นหาตัวอย่างเพิ่มเติม

- ผู้สนับสนุนของเรา

ขยาย