hyper fetch

الميزات الرئيسية

؟ إعداد بسيط - اقرأ المزيد

الإلغاء السهل - اقرأ المزيد

طلبات مماثلة - اقرأ المزيد

قائمة الانتظار - اقرأ المزيد

؟ استجابة التخزين المؤقت - اقرأ المزيد

؟ غير متصل أولاً - اقرأ المزيد

؟ Fetcher المدمج - اقرأ المزيد

؟ المصادقة - اقرأ المزيد

؟ إعادة المحاولة الذكية - اقرأ المزيد

ساعدني في الاستمرار في العمل في هذا المشروع ❤

• كن راعيا على جيثب

تثبيت

أسهل طريقة للحصول على أحدث إصدار من Hyper Fetch هي تثبيته عبر Yarn أو 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
مسؤول 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 > ;

اكتشف المزيد من الأمثلة

؟ الرعاة لدينا

يوسع