react sync

رد الفعل المزامنة

أسلوب تعريفي لجلب بيانات واجهة برمجة التطبيقات (API) باستخدام جلب HTML5

غاية

يوفر react-sync مكونًا واحدًا عالي الترتيب يستخدم لجلب البيانات من واجهات برمجة التطبيقات الخاصة بك

إن تقديم البيانات هو مسؤوليتك، ولكن تحديث البيانات من واجهة برمجة التطبيقات (API) يعد أمرًا بسيطًا مثل تغيير معلمات طلبك. اسمح للمكون بإدارة حالة جلب البيانات.

الدعائم ReactSync

اسم	وصف	يكتب	مطلوب	تقصير
عنوان URL	عنوان URL المطلوب جلبه بدون أي معلمات استعلام	خيط	نعم
رؤوس	كائن يحتوي على كافة الرؤوس لتمريرها إلى الطلب	هدف	لا	null
المعلمات	كائن يحتوي على كافة معلمات الاستعلام لتمريرها إلى الطلب	هدف	لا	null
toQueryString	الوظيفة المستخدمة لتحويل دعامة معلمات الاستعلام إلى سلسلة استعلام	وظيفة	لا	./toQueryString.js
toData	دالة تأخذ كائن استجابة وترجع وعدًا يتم حله مع البيانات الموجودة في الاستجابة	وظيفة	لا	إرجاع استجابة JSON بشكل افتراضي
أطفال	دالة تأخذ كائنًا {promise, data, error} وترجع عقدة ليتم عرضها	وظيفة	نعم

المصدر: Props.jsx

الدعائم الطفل

تتلقى الوظيفة التي تم تمريرها إلى الدعامة children حالة الجلب

اسم	وصف	يكتب
يعد	الوعد المعلق في حالة وجود أي طلبات معلقة	مثال الوعد
بيانات	البيانات التي تم جلبها من API	نتيجة toData
خطأ	أي أخطاء في الجلب قد تكون حدثت	مثيل الخطأ

ثَبَّتَ

npm install --save react-sync

بدلاً من ذلك، يتم إنشاء هذا المشروع إلى وحدة UMD تسمى ReactSync، بحيث يمكنك تضمين علامة البرنامج النصي unpkg في صفحتك

ابحث عن window.ReactSync عند استيراد وحدة UMD عبر علامة البرنامج النصي

الاستخدام

راجع المصدر التجريبي على سبيل المثال الاستخدام مع التصفية

 import React from 'react' ;
import ReactSync from 'react-sync' ;

const StarGazers = ( { owner , repo , githubToken } ) => (
  < ReactSync 
    url = { `https://api.github.com/repos/ ${ owner } / ${ repo } /stargazers` } 
    headers = { { Authorization : `token ${ githubToken } ` } } >
    {
      ( { promise , data , error } ) => (
        < span >
          { promise !== null ? 'Loading...' : data }      
        </ span >
      )
    }
  </ ReactSync >
) ; 

أنماط

التكوين هو الملك عند استخدام هذا المكون.

على سبيل المثال، هل تريد إعادة الجلب تلقائيًا كل دقيقة؟ قم بإنشاء مكون يغلف ReactSync ويقوم بتحديث معلمة استعلام الطابع الزمني كل دقيقة.

 import React , { Component } from 'react' ;
import PropTypes from 'prop-types' ;
import Sync from 'react-sync' ;

const now = ( ) => ( new Date ( ) ) . getTime ( ) ;

export default class RefreshSync extends Component {
  static propTypes = {
    refreshEvery : PropTypes . number
  } ;

  _timer = null ;
  state = {
    _ts : now ( )
  } ;

  triggerNextRefresh = after => {
    clearTimeout ( this . _timer ) ;
    this . _timer = setTimeout ( this . refresh , after ) ;
  } ;

  refresh = ( ) => {
    this . setState ( { _ts : now ( ) } ) ;
    this . triggerNextRefresh ( this . props . refreshEvery ) ;
  } ;

  componentDidMount ( ) {
    this . triggerNextRefresh ( this . props . refreshEvery ) ;
  }

  componentWillReceiveProps ( { refreshEvery } ) {
    if ( refreshEvery !== this . props . refreshEvery ) {
      this . triggerNextRefresh ( refreshEvery ) ;
    }
  }

  render ( ) {
    const { params , ... rest } = this . props ,
      { _ts } = this . state ;

    return < Sync { ... rest } params = { { ... params , _ts } } /> ;
  }
}

ماذا عن إرفاق رمز مميز من السياق بجميع الطلبات؟

 import React , { Component } from 'react' ;
import PropTypes from 'prop-types' ;
import Sync from 'react-sync' ;

export default class AuthenticatedSync extends Component {
  static contextTypes = {
    token : PropTypes . string
  } ;

  render ( ) {
    const { headers , ... rest } = this . props ,
      { token } = this . context ;

    return (
      < Sync
        { ... rest }
        headers = { {
          ... headers ,
          Authorization : token ? `Bearer ${ token } ` : null
        } }
      />
    ) ;
  }
}

ماذا عن تعيين عنوان URL الأساسي بشكل افتراضي؟

 import React from 'react' ;
import Sync from 'react-sync' ;

export const MyApiSync = ( { path , ... rest } ) => (
  < Sync { ... rest } url = { [ 'https://my-api.com' , path ] . join ( '/' ) } />
) ;