Fitted

جاهزة

استخدم أدوات تزيين ECMAScript (حاليًا مقترح المرحلة الثانية) لتنفيذ طلبات HTTP وإدارة معالجة الاستجابات، وهي طريقة سهلة ومقروءة لإدارة كيفية تدفق البيانات عبر طبقة الشبكة لتطبيقك.

مثال

جزأان رئيسيان، مصممو الطريقة الذين سينفذون الطلب بالفعل، ومصممو الفئة الذين سيسمحون لك بالتعامل مع الطريقة التي يتم بها تحويل الاستجابات من الخادم ومعالجتها.

أبسط مثال هو مجرد جلب البيانات من نقطة نهاية JSON:

 import { get } from 'fitted' ;

class HackerNews {
    @ get ( 'https://hacker-news.firebaseio.com/v0/topstories.json' )
    topstories ( request , response ) {
      return request ( { } , response ) ;
    }
}

وجلب:

 const hackerNews = new HackerNews ( ) ;
const topstories = await hackerNews . topstories ( ) ;
console . log ( topstories ) ; 

الاستخدام

الطلب الأساسي

باستخدام get Decorator يمكنك تشغيل طلب GET :

 import { get } from 'fitted' ;

class HackerNews {
    @ get ( 'https://hacker-news.firebaseio.com/v0/topstories.json' )
    topstories ( request , response ) {
      return request ( { } , response ) ;
    }
}

دمج البارامترات

لدمج المعلمات مع عنوان url، نستخدم قالب url، والذي يستخدم الأقواس المتعرجة لتغليف المتغير المراد دمجه.

 import { get } from 'fitted' ;

class HackerNews {
      @ get ( 'https://hacker-news.firebaseio.com/v0/item/{id}.json' )
      item ( id , request , response ) {
          return request ( {
                template : {
                    id : 123
                 }
          } , response ) ;
      }
}

عنوان URL الأساسي

في أغلب الأحيان، ستتشارك نقاط النهاية الخاصة بك في نفس عنوان url الأساسي، لذا يتيح لك Fitted تعيين عنوان url أساسي والذي سيكون مسبوقًا بجميع المسارات المحددة في أدوات تزيين الطريقة الخاصة بك.

 import { base , get } from 'fitted' ;

@ base ( 'https://hacker-news.firebaseio.com/v0/' )
class HackerNews {
      @ get ( 'item/{id}.json' )
      item ( id , request , response ) {
          return request ( {
                template : {
                    id : 123
                 }
          } , response ) ;
      }
}

إرسال البيانات

لإضافة بيانات إلى طلبك post ، put الطلبات destroy وتحديد سلسلة استعلام لطلب get الخاص بك، يمكنك إضافة كائن data إلى تعريف طلبك.

 import { put } from 'fitted' ;

class HackerNews {
      @ put ( 'https://hacker-news.firebaseio.com/v0/item/{id}.json' )
      item ( id , name , request , response ) {
          return request ( {
                template : {
                    id : 123
                } ,
                data : {
                   name : name
                }
          } , response ) ;
      }
}

طلب تزيين

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

 import { get , request } from 'fitted' ;

const myRequestHandler = config => {
    config . headers = {
        'accept' : 'application/json' 
    }
    
    return config ;
}

@ request ( myRequestHandler )
class HackerNews {
    @ get ( 'item/{id}.json' )
    item ( id , request , response ) {
      return request ( {
            template : {
                id : id
            }
        } , response ) ;
    }
}

التعامل مع الاستجابة

عندما يستجيب الخادم برأس Content-Type الذي يحتوي على application/json Fitted، فسوف يقوم تلقائيًا بتغذيته إلى وظيفة JSON.parse بحيث يقوم Promise الناتج بإخراج الكائن المقابل.

سيؤدي أي Content-Type آخر إلى حدوث خطأ ويتطلب منك تنفيذ المعالج الخاص بك.

معالج الاستجابة المخصصة

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

 import { get , processor } from 'fitted' ;

const myProcessor = response => {
    const data = JSON . parse ( response . getBody ( ) ) ;
    response . setBody ( data ) ;
    
    return data ;
}

@ processor ( myProcessor )
class HackerNews {
    @ get ( 'item/{id}.json' )
    item ( id , request , response ) {
      return request ( {
            template : {
                id : id
            }
        } , response ) ;
    }
}