thwack

ضرب. حل صغير وحديث لجلب البيانات

ليرة تركية؛ د

ثوك هو:

• Modern — Thwack هو حل لجلب بيانات HTTP مصمم للمتصفحات الحديثة
• ؟ صغير - يتم ضغط الضربة بمقدار 1.5 كيلو بايت فقط
• ?‍? أكثر ذكاءً - تم تصميمه باستخدام جافا سكريبت الحديث
• ؟ مألوف - يستخدم Thwack واجهة تشبه واجهة Axios
• ?️ مكتوب — تضمين أسهل لمشاريع TypeScript
• دعم NodeJS 10 و12
• دعم رد الفعل الأصلي

هذا الملف التمهيدي (README) هو عمل قيد التقدم. يمكنك أيضًا أن تسألني سؤالاً على تويتر.

تثبيت

$ npm i thwack

أو

$ yarn add thwack

لماذا تغلب على أكسيوس؟

كان Axios رائعًا عندما تم إصداره في ذلك اليوم. لقد أعطانا برنامج تضمين قائم على الوعد حول XMLHttpRequest ، والذي كان من الصعب استخدامه. لكن ذلك كان منذ وقت طويل وتغير الزمن، وأصبحت المتصفحات أكثر ذكاءً. ربما حان الوقت لمواكبة حلول جلب البيانات الخاصة بك؟

تم إنشاء Thwack من الألف إلى الياء مع وضع المتصفحات الحديثة في الاعتبار. ولهذا السبب، فهي لا تحتوي على الأمتعة التي تمتلكها Axios. يبلغ وزن Axios حوالي 5 كيلو بايت مضغوطة. من ناحية أخرى، فإن Thwack هو نحيف يصل إلى 1.5 كيلو تقريبًا.

وهي تدعم نفس واجهة برمجة التطبيقات (API)، ولكن هناك بعض الاختلافات - بشكل أساسي حول options - ولكن في الغالب، يجب أن تكون قابلة للاستخدام بالتبادل للعديد من التطبيقات.

لا يحاول Thwack حل كل مشكلة، كما يفعل Axios، ولكنه بدلاً من ذلك يوفر الحل لـ 98% مما يحتاجه المستخدمون حقًا . وهذا ما يمنح Thwack بصمته الخفيفة كالريشة.

اخدش ذلك. يوفر Thwack نفس مستوى القوة الذي توفره Axios مع مساحة أصغر بكثير. ونظام الأحداث القائم على الوعد الخاص بـ Thwack أسهل في الاستخدام.

طُرق

تتوفر الطرق التالية في كافة مثيلات Thwack.

جلب البيانات

• thwack(url: string [,options: ThwackOptions]): Promise<ThwackResponse>;

• thwack.request(options: ThwackOptions): Promise<ThwackResponse>

• thwack.get(url: string [,options: ThwackOptions]): Promise<ThwackResponse>;

• thwack.delete(url: string [,options: ThwackOptions]): Promise<ThwackResponse>;

• thwack.head(url: string [,options: ThwackOptions]): Promise<ThwackResponse>;

• thwack.post(url: string, data:any [,options: ThwackOptions]): Promise<ThwackResponse>;

• thwack.put(url: string, data:any [,options: ThwackOptions]): Promise<ThwackResponse>;

• thwack.patch(url: string, data:any [,options: ThwackOptions]): Promise<ThwackResponse>;

جدوى

• thwack.create(options: ThwackOptions): ThwackInstance;

  تقوم طريقة create بإنشاء (da!) مثيل فرعي جديد لمثيل Thwack الحالي مع options المحددة.

• thwack.getUri(options: ThwackOptions): string;

  دقة عنوان URL لـ Thwacks متوافقة مع RFC-3986. أكسيوس ليس كذلك. إنه مدعوم من @thwack/resolve .

مستمعي الحدث

يدعم Thwack أنواع الأحداث التالية: request response data error .

لمزيد من المعلومات حول نظام أحداث Thwack، راجع أحداث Thwack أدناه.

• thwack.addEventListener(type: string, callback: (event:ThwackEvent) => Promise<any> ): void;

• thwack.removeEventListener(type: string, callback: (event:ThwackEvent) => Promise<any> ): void;

الأساليب الثابتة

التزامن

يحتوي Thwack على الوظائف المساعدة التالية لتقديم الطلبات المتزامنة. هم في الغالب من أجل التوافق مع Axios. راجع قسم "الكيفية" أدناه للحصول على مثال الاستخدام.

• thwack.all(Promise<ThwackResponse>[])

• thwack.spread(callback<results>)

ThwackOptions

تحتوي وسيطة options على الخصائص التالية.

url

وهذا إما عنوان URL مؤهل بالكامل أو عنوان URL نسبي.

baseURL

يحدد عنوان URL الأساسي الذي سيتم استخدامه لإنشاء عنوان URL مؤهل بالكامل من url أعلاه. يجب أن يكون عنوان URL مطلقًا أو undefined . الافتراضي هو origin + pathname لصفحة الويب الحالية إذا كانت تعمل في متصفح أو undefined على Node أو React Native.

على سبيل المثال، إذا فعلت هذا:

 thwack ( 'foo' , {
  baseURL : 'http://example.com' ,
} ) ;

سيكون عنوان URL الذي تم جلبه هو:

 http://example.com/foo

method

سلسلة تحتوي على إحدى طرق HTTP التالية: get أو post أو put أو patch أو delete أو head .

data

إذا كانت method هي post أو put أو patch ، فهذه هي البيانات التي سيتم استخدامها لبناء نص الطلب.

headers

هذا هو المكان الذي يمكنك فيه وضع أي رؤوس طلب HTTP اختيارية. يتم دمج أي رأس تحدده هنا مع أي قيم رأس مثيلة.

على سبيل المثال، إذا قمنا بتعيين مثيل Thwack مثل هذا:

 const api = thwack . create ( {
  headers : {
    'x-app-name' : 'My Awesome App' ,
  } ,
} ) ;

ثم لاحقًا، عند استخدام المثيل، يمكنك إجراء مكالمة مثل هذا:

 const { data } = await api . get ( 'foo' , {
  headers : {
    'some-other-header' : 'My Awesome App' ,
  } ,
} ) ;

العناوين التي سيتم إرسالها هي:

 x-app-name: My Awesome App
some-other-header': 'My Awesome App'

defaults

يتيح لك هذا قراءة/تعيين الخيارات الافتراضية لهذا المثيل، وفي الواقع، أي مثيلات فرعية.

مثال:

 thwack . defaults . baseURL = 'https://example.com/api' ;

على سبيل المثال، defaults هي نفس الكائن الذي تم تمريره create . على سبيل المثال، سيتم إخراج ما يلي "https://example.com/api".

 const instance = thwack . create ( {
  baseURL : 'https://example.com/api' ,
} ) ;
console . log ( instance . defaults . baseURL ) ;

لاحظ أيضًا أن تعيين الإعدادات defaults لمثيل (أو حتى تمرير options ) إلى مثيل لا يؤثر على الأصل. لذا، بالنسبة للمثال التالي، سيظل thwack.defaults.baseURL هو "https://api1.example.net/".

 thwack . defaults . baseURL = 'https://api1.example.net/' ;
const instance = thwack . create ( ) ;
instance . defaults . baseURL = 'https://example.com/api' ;

console . log ( thwack . defaults . baseURL ) ;

params

هذا كائن اختياري يحتوي على أزواج المفتاح/القيمة التي سيتم استخدامها لإنشاء عنوان URL للجلب. في حالة وجود أي أجزاء :key baseURL أو url ، فسيتم استبدالها بقيمة المفتاح المطابق. على سبيل المثال، إذا فعلت هذا:

 thwack ( 'orders/:id' , {
  params : { id : 123 } ,
  baseURL : 'http://example.com' ,
} ) ;

سيكون عنوان URL الذي تم جلبه هو:

 http://example.com/orders/123

إذا لم تحدد :name ، أو كان هناك param أكبر من المعلمات مقارنة بـ :name s، فسيتم تعيين المفاتيح/القيم المتبقية كمعلمات بحث (على سبيل المثال ?key=value ).

maxDepth

الحد الأقصى لمستوى الطلبات العودية التي يمكن إجراؤها في callbck قبل أن يلقي Thwack خطأً. يتم استخدام هذا لمنع رد اتصال الحدث من التسبب في حلقة متكررة، وذلك إذا أصدر request آخر دون وجود ضمانات مناسبة. الافتراضي = 3.

responseType

افتراضيًا، سيحدد Thwack تلقائيًا كيفية فك تشفير بيانات الاستجابة بناءً على قيمة content-type رأس الاستجابة. ومع ذلك، إذا استجاب الخادم بقيمة غير صحيحة، فيمكنك تجاوز المحلل اللغوي عن طريق تعيين responseType . القيم الصالحة هي arraybuffer و document (أي formdata ) و json و text و stream و blob . الإعدادات الافتراضية إلى تلقائية.

ما يتم إرجاعه بواسطة Thwack يتم تحديده من خلال الجدول التالي. عمود "طريقة الجلب" هو ما يتم حله في data . إذا لم تحدد responseType ، فسيقوم Thwack تلقائيًا بتحديد طريقة الجلب بناءً على content-type وجدول responseParserMap (انظر أدناه).

نوع المحتوى	responseType	طريقة fetch
application/json	json	response.json()
multipart/form-data	formdata	response.formData()
text/event-stream	stream	يقوم بتمرير response.body data بدون معالجة
	blob	response.blob()
	arraybuffer	response.arrayBuffer()
*/*	text	response.text()

ملحوظة: stream غير مدعوم حاليًا في React Native بسبب #27741

responseParserMap

هناك طريقة أخرى مفيدة لتحديد محلل الاستجابة الذي يجب استخدامه باستخدام responseParserMap . يسمح لك بإعداد تعيين بين content-type الناتج من رأس الاستجابة ونوع المحلل اللغوي.

يستخدم Thwack الخريطة التالية كخريطة افتراضية، والتي تسمح بفك تشفير بيانات json و formdata . إذا لم تكن هناك أي تطابقات، فإن محلل الاستجابة الافتراضي هو text . يمكنك تحديد الإعداد الافتراضي عن طريق تعيين مفتاح */* الخاص.

{
  "application/json" : " json " ,
  "multipart/form-data" : " formdata " ,
  "*/*" : " text "
} ;

يتم دمج أي قيمة تحددها في responseParserMap في الخريطة الافتراضية. وهذا يعني أنه يمكنك تجاوز الإعدادات الافتراضية و/أو إضافة قيم جديدة.

لنفترض، على سبيل المثال، أنك ترغب في تنزيل صورة إلى فقاعة. يمكنك تعيين baseURL إلى نقطة نهاية واجهة برمجة التطبيقات (API) الخاصة بك و responseParserMap الذي سيقوم بتنزيل الصور من أي نوع ككائنات نقطية كبيرة الحجم، ولكنه سيظل يسمح بتنزيلات json (حيث أن هذا هو الإعداد الافتراضي content-type: application/json ).

 import thwack from 'thwack' ;

thwack . defaults . responseParserMap = { 'image/*' : 'blob' } ;

سيتم تحليل أي عنوان URL تقوم بتنزيله باستخدام نوع محتوى image/* (على سبيل المثال image/jpeg ، image/png ، وما إلى ذلك) باستخدام محلل البيانات blob .

 const getBlobUrl = async ( url ) => {
  const blob = ( await thwack . get ( url ) ) . data ;
  const objectURL = URL . createObjectURL ( blob ) ;
  return objectURL ;
} ;

شاهد هذا المثال الذي يعمل على CodeSandbox.

لاحظ أنه يمكنك استخدام هذه التقنية لأشياء أخرى غير الصور.

كما ترون، يعد استخدام responseParserMap طريقة رائعة للتخلص من الحاجة إلى تعيين responseType لاستدعاءات Thwack المختلفة.

validateStatus

يتم استخدام هذه الوظيفة الاختيارية لتحديد رموز الحالة التي يستخدمها Thwack لإرجاع وعد أو رمي. يتم تمرير status الاستجابة. فإذا عادت هذه الدالة صادقا، انقضى الوعد، وإلا رفض الوعد.

تعرض الوظيفة الافتراضية أي حالة ليست في 2xx (أي 200-299)

paramsSerializer

هذه وظيفة اختيارية سوف يستدعيها Thwack لإجراء تسلسل params . على سبيل المثال، بالنظر إلى الكائن {a:1, b:2, foo: 'bar'} ، يجب إجراء تسلسل له إلى السلسلة a=1&b=2&foo=bar .

بالنسبة لمعظم الأشخاص، يجب أن يعمل المُسلسل الافتراضي بشكل جيد. هذا مخصص بشكل أساسي لحالة الحافة وتوافق Axios.

لاحظ أن المُسلسل الافتراضي يقوم بترتيب المعلمات أبجديًا، وهي ممارسة جيدة يجب اتباعها. ومع ذلك، إذا لم يكن هذا مناسبًا لموقفك، فيمكنك إنشاء برنامج التسلسل الخاص بك.

resolver

هذه هي الوظيفة التي يمكنك توفيرها لتجاوز سلوك المحلل الافتراضي. يأخذ resolver وسيطتين: url و baseURL الذي يجب أن يكون غير محدد، أو عنوان URL مطلق. يجب أن يكون هناك سبب وجيه لاستبدال وحدة الحل، ولكن هذه هي فتحة الهروب الخاصة بك في حالة الحاجة إلى ذلك.

ثواكريسبونس

status

number يمثل رموز حالة HTTP المكونة من 3 أرقام والتي تم استلامها.

• 1xx - استجابة إعلامية
• 2xx - النجاح
• 3xx - إعادة التوجيه
• 4xx - أخطاء العميل
• 5xx - أخطاء الخادم

ok

القيمة boolean التي تم تعيينها على true هي رمز status الموجود في النطاق 2xx (أي نجاح). لا تتأثر هذه القيمة بـ validateStatus .

statusText

string تمثل نص رمز status . يجب عليك استخدام رمز status (أو ok ) في أي منطق برنامج.

headers

كائن مفتاح/قيمة مع رؤوس HTTP التي تم إرجاعها. سيتم دمج أي رؤوس مكررة في رأس واحد مفصول بفواصل منقوطة.

data

سيحتفظ هذا بالنص الذي تم إرجاعه لاستجابة HTTP بعد أن يتم دفقه وتحويله. الاستثناء الوحيد هو إذا استخدمت responseType stream ، وفي هذه الحالة يتم تعيين data مباشرة إلى عنصر body .

إذا تم طرح خطأ ThwackResponseError ، فستكون data عبارة عن نص عادي يمثل نص الاستجابة.

options

كائن options الكاملة الذي قام بمعالجة الطلب. سيتم دمج هذه options بالكامل مع أي مثيل (مثيلات) أصل، وكذلك مع defaults .

response

كائن Response HTTP الكامل كما تم إرجاعه عن طريق fetch أو response من رد اتصال حدث اصطناعي.

ThwackResponseError

إذا كانت الاستجابة من طلب Thwack تؤدي إلى رمز status غير 2xx (على سبيل المثال، 404 لم يتم العثور عليه)، فسيتم طرح خطأ ThwackResponseError .

ملاحظة: من الممكن أن يتم طرح أنواع أخرى من الأخطاء (على سبيل المثال، رد اتصال مستمع حدث سيء)، لذلك من الأفضل التحقق من الخطأ الذي تم اكتشافه لمعرفة ما إذا كان من النوع ThwackResponseError .

 try {
  const { data } = await thwack . get ( someUrl )
} catch ( ex ) {
  if ( ex instanceof thwack . ThwackResponseError )
    const { status , message } = ex ;
    console . log ( `Thwack status ${ status } : ${ message } ` ) ;
  } else {
    throw ex ; // If not, rethrow the error
  }
}

يحتوي ThwackResponseError على جميع خصائص Error JavaScript العادي بالإضافة إلى خاصية thwackResponse التي لها نفس خصائص حالة النجاح.

المثيلات

تعتمد المثيلات التي تم إنشاؤها في Thwack على المثيل الأصلي. تنتقل الخيارات الافتراضية لأحد الوالدين عبر المثيلات. يمكن أن يكون هذا مفيدًا لإعداد الخيارات في الوالدين والتي يمكن أن تؤثر على الأطفال، مثل baseURL ،

وعلى العكس من ذلك، يمكن للوالدين استخدام addEventListener لمراقبة أطفالهم (راجع كيفية تسجيل كل استدعاء لواجهة برمجة التطبيقات أدناه للحصول على مثال على ذلك).

أحداث هاك

إلى جانب الحالات، فإن نظام أحداث Thwack هو ما يجعل Thwack قويًا للغاية. مع ذلك، يمكنك الاستماع لأحداث مختلفة.

هنا هو تدفق الحدث لجميع الأحداث. كما ترون، من الممكن أن يدخل الكود الخاص بك في حلقة لا نهاية لها، إذا أصدر رد الاتصال الخاص بك request() بشكل أعمى دون التحقق مما إذا كان قد تم ذلك بالفعل، لذا كن حذرًا.

حدث request

عندما يستدعي أي جزء من التطبيق إحدى طرق جلب البيانات، يتم تشغيل حدث request . سيحصل أي مستمع على كائن ThwackRequestEvent الذي يحتوي على options الاستدعاء في event.options . يمكن لمستمعي الأحداث القيام بشيء بسيط مثل (تسجيل الحدث) أو معقد مثل منع الطلب وإرجاع الاستجابة باستخدام (بيانات وهمية)

 // callback will be called for every request made in Thwack
thwack . addEventListener ( 'request' , callback ) ;

لاحظ أن عمليات رد الاتصال يمكن أن تكون async مما يسمح لك بتأجيل Thwack بحيث يمكنك، على سبيل المثال، الخروج وجلب البيانات بعنوان URL مختلف قبل المتابعة.

حدث response

يتم إطلاق الحدث بعد تلقي رؤوس HTTP، ولكن قبل دفق النص وتحليله. سيتلقى المستمعون كائن ThwackResponseEvent مع تعيين مفتاح thwackResponse على الاستجابة.

حدث data

يتم إطلاق الحدث بعد دفق النص وتحليله. يتم تشغيله فقط إذا أعاد الجلب رمز الحالة 2xx. سيتلقى المستمعون كائن ThwackDataEvent مع تعيين مفتاح thwackResponse على الاستجابة.

حدث error

يتم إطلاق الحدث بعد دفق النص وتحليله. يتم تشغيله إذا أعاد الجلب رمز حالة غير 2xx. سيتلقى المستمعون كائن ThwackErrorEvent مع تعيين مفتاح thwackResponse على الاستجابة.

NodeJS

سيعمل Thwack على NodeJS، لكنه يتطلب تعبئة متعددة لـ window.fetch . لحسن الحظ، هناك ملف polyfill رائع يسمى node-fetch يمكنك استخدامه.

إذا كنت تستخدم الإصدار 10 من NodeJS، فستحتاج أيضًا إلى تعبئة متعددة لـ Array#flat و Object#fromEntries . يحتوي الإصدار 11+ من NodeJS على هذه الطرق ولا يتطلب تعبئة متعددة.

يمكنك إما توفير هذه الحشوات المتعددة بنفسك، أو استخدام إحدى الواردات الملائمة التالية بدلاً من ذلك. إذا كنت تستخدم NodeJS 11+، فاستخدم:

 import thwack from 'thwack/node' ; // NodeJS version 12+

إذا كنت تعمل على NodeJS 10، فاستخدم:

 import thwack from 'thwack/node10' ; // NodeJS version 10

إذا كنت ترغب في توفير عمليات التعبئة المتعددة هذه بنفسك، لاستخدام Thwack، يجب عليك الاستيراد من thwack/core وتعيين fetch كإعداد افتراضي fetch على هذا النحو.

 import thwack from 'thwack/code' ;
thwack . defaults . fetch = global . fetch ;

يجب أن يتم ذلك في رمز بدء تشغيل تطبيقك، وعادة ما يكون index.js .

ملاحظة: responseType blob غير مدعوم في NodeJS.

رد الفعل الأصلي

Thwack متوافق مع React Native ولا يحتاج إلى عمليات تعبئة إضافية. انظر أدناه للحصول على نموذج تطبيق مكتوب بلغة React Native.

ملحوظة: React Native لا يدعم stream بسبب #27741

كيف

طلبات متزامنة متعددة

يمكنك استخدام thwack.all() و thwack.spread() لتقديم طلبات متزامنة. يتم بعد ذلك تقديم البيانات إلى رد الاتصال الخاص بك كمصفوفة واحدة.

نعرض هنا معلومات لاثنين من مستخدمي GitHub.

 function displayGitHubUsers ( ) {
  return thwack
    . all ( [
      thwack . get ( 'https://api.github.com/users/donavon' ) ,
      thwack . get ( 'https://api.github.com/users/revelcw' ) ,
    ] )
    . then (
      thwack . spread ( ( ... results ) => {
        const output = results
          . map (
            ( { data } ) => ` ${ data . login } has ${ data . public_repos } public repos`
          )
          . join ( 'n' ) ;
        console . log ( output ) ;
      } )
    ) ;
}

لاحظ أن هذه مجرد وظائف مساعدة. إذا كنت تستخدم async / await ، فيمكنك كتابة هذا بدون مساعدي Thwack باستخدام Promise.all .

 async function displayGitHubUsers ( ) {
  const results = await Promise . all ( [
    thwack . get ( 'https://api.github.com/users/donavon' ) ,
    thwack . get ( 'https://api.github.com/users/revelcw' ) ,
  ] ) ;
  const output = results
    . map ( ( { data } ) => ` ${ data . login } has ${ data . public_repos } public repos` )
    . join ( 'n' ) ;
  console . log ( output ) ;
}

يمكنك رؤية هذا قيد التشغيل مباشرة في CodeSandbox.

(عرض توضيحي مستوحى من هذا المنشور الفقاعي على axios/fetch)

إلغاء الطلب

استخدم AbortController لإلغاء الطلبات عن طريق تمرير signal في خيارات thwack .

في المتصفح، يمكنك استخدام AbortController المدمج.

 import thwack from 'thwack' ;

const controller = new AbortController ( ) ;
const { signal } = controller ;

thwack ( url , { signal } ) . then ( handleResponse ) . catch ( handleError ) ;

controller . abort ( ) ;

في NodeJS، يمكنك استخدام شيء مثل وحدة تحكم الإجهاض.

 import thwack from 'thwack' ;
import AbortController from 'abort-controller' ;

const controller = new AbortController ( ) ;
const { signal } = controller ;

thwack ( url , { signal } ) . then ( handleResponse ) . catch ( handleError ) ;

controller . abort ( ) ;

في حالة رغبتك في تنفيذ بعض الإجراءات عند إلغاء الطلب، يمكنك الاستماع إلى حدث abort عند signal أيضًا:

 signal . addEventListener ( 'abort' , handleAbort ) ;

تسجيل كل طلب

أضف addEventListener('request', callback) وقم بتسجيل كل طلب إلى وحدة التحكم.

 import thwack from 'thwack' ;

thwack . addEventListener ( 'request' , ( event ) => {
  console . log ( 'hitting URL' , thwack . getUri ( event . options ) ) ;
} ) ;

إذا كنت تستخدم React، فإليك خطافًا يمكنك "استخدامه" في تطبيقك والذي سيحقق نفس الشيء.

 import { useEffect } from 'react' ;
import thwack from 'thwack' ;

const logUrl = ( event ) => {
  const { options } = event ;
  const fullyQualifiedUrl = thwack . getUri ( options ) ;
  console . log ( `hitting ${ fullyQualifiedUrl } ` ) ;
} ;

const useThwackLogger = ( ) => {
  useEffect ( ( ) => {
    thwack . addEventListener ( 'request' , logUrl ) ;
    return ( ) => thwack . removeEventListener ( 'request' , logUrl ) ;
  } , [ ] ) ;
} ;

export default useThwackLogger ;

فيما يلي مقتطف من التعليمات البرمجية حول كيفية استخدامه.

 const App = ( ) = {
  useThwackLogger ( )

  return (
    < div >
      ...
    </ div >
  )
}

إرجاع بيانات وهمية

لنفترض أن لديك تطبيقًا قدم طلبًا لبعض بيانات المستخدم. إذا كان التطبيق يصل إلى عنوان URL محدد (على سبيل المثال، users ) ويستفسر عن معرف مستخدم معين (على سبيل المثال 123 )، فإنك ترغب في منع الطلب من الوصول إلى الخادم والاستهزاء بالنتائج بدلاً من ذلك.

status الافتراضية في ThwackResponse هي 200، لذلك ما لم تكن بحاجة إلى الاستهزاء باستجابة غير موافق، فستحتاج فقط إلى إرجاع data .

 thwack . addEventListener ( 'request' , async ( event ) => {
  const { options } = event ;
  if ( options . url === 'users' && options . params . id === 123 ) {
    // tells Thwack to use the returned value instead of handling the event itself
    event . preventDefault ( ) ;

    // stop other listeners (if any) from further processing
    event . stopPropagation ( ) ;

    // because we called `preventDefault` above, the caller's request
    // will be resolved to this `ThwackResponse` (defaults to status of 200 and ok)
    return new thwack . ThwackResponse (
      {
        data : {
          name : 'Fake Username' ,
          email : '[email protected]' ,
        } ,
      } ,
      options
    ) ;
  }
} ) ;

تحويل DTO إلى نموذج

غالبًا ما يكون من المرغوب فيه تحويل DTO (كائن نقل البيانات) إلى شيء يسهل على العميل استهلاكه. في هذا المثال أدناه، نقوم بتحويل DTO معقد إلى firstName lastName avatar والبريد email . يتم تجاهل عناصر البيانات الأخرى التي يتم إرجاعها من استدعاء API، ولكن لا تحتاج إليها التطبيقات.

يمكنك الاطلاع على مثال لتحويل DTO وتسجيل البيانات المزيفة وإرجاعها في نموذج التطبيق هذا.

يمكنك عرض الكود المصدري على CodeSandbox.

تحميل صورة باعتبارها النقطة

في هذا المثال، لدينا React Hook الذي يقوم بتحميل صورة كعنوان URL لكائن Blob. يقوم بتخزين عنوان URL مؤقتًا لتعيين عنوان URL لـ Blob في مساحة تخزين الجلسة. بمجرد التحميل، سيؤدي أي تحديث للصفحة إلى تحميل الصورة من URL Blob على الفور.

 const useBlobUrl = ( imageUrl ) => {
  const [ objectURL , setObjectURL ] = useState ( '' ) ;

  useEffect ( ( ) => {
    let url = sessionStorage . getItem ( imageUrl ) ;

    async function fetchData ( ) {
      if ( ! url ) {
        const { data } = await thwack . get ( imageUrl , {
          responseType : 'blob' ,
        } ) ;
        url = URL . createObjectURL ( data ) ;
        sessionStorage . setItem ( imageUrl , url ) ;
      }
      setObjectURL ( url ) ;
    }

    fetchData ( ) ;
  } , [ imageUrl ] ) ;

  return objectURL ;
} ;

شاهد هذا المثال على CodeSandbox

التوجيه الانتقائي

لديك الآن نقطة نهاية REST على https://api.example.com . لنفترض أنك قمت بنشر نقطة نهاية REST جديدة إلى عنوان URL مختلف وترغب في البدء ببطء في توجيه 2% من حركة مرور الشبكة إلى هذه الخوادم الجديدة.

ملاحظة: عادةً ما يتم التعامل مع هذا الأمر بواسطة موازن التحميل الخاص بك على الواجهة الخلفية. يتم عرضه هنا لأغراض العرض التوضيحي فقط.

يمكننا تحقيق ذلك عن طريق استبدال options.url في مستمع حدث الطلب على النحو التالي.

 thwack . addEventListener ( 'request' , ( event ) => {
  if ( Math . random ( ) >= 0.02 ) {
    return ;
  }

  // the code will be executed for approximately 2% of the requests
  const { options } = event ;
  const oldUrl = thwack . getUri ( options ) ;
  const url = new URL ( '' , oldUrl ) ;
  url . origin = 'https://api2.example.com' ; // point the origin at the new servers
  const newUrl = url . href ; // Get the fully qualified URL
  event . options = { ... event . options , url : newUrl } ; // replace `options`]
} ) ;

رد فعل التطبيق عينة الأصلي

جنبًا إلى جنب مع use-thwack ، فإن كتابة تطبيق جلب البيانات لـ React Native لا يمكن أن يكون أسهل.

عرض التطبيق بأكمله الذي يعمل على Expo.

الاعتمادات

Thwack مستوحى بشكل كبير من Axios. شكرا مات!

رخصة

مرخص تحت معهد ماساتشوستس للتكنولوجيا

المساهمين

شكرًا لهؤلاء الأشخاص الرائعين (مفتاح الرموز التعبيرية):

دونافون ويست ؟ ️ ؟ ؟ ؟ ؟	جيريمي تايس	يوريما استيفيز	جيريمي بارجار	بروك سكارليت يالوف	كارل هوركي	كوجي
توم بيرر	إيان ساذرلاند	بليك يودر	ريان هينشي	ميرو دويكيتش	com.santicevic

يتبع هذا المشروع مواصفات جميع المساهمين. المساهمات من أي نوع موضع ترحيب!