كيفية تقديم طلبات اجاكس في رد الفعل؟

إذا كنت سأختار موضوعًا واحدًا مذكورًا كثيرًا في منتديات حول React أو frontend بشكل عام ، فسيتم تقديم طلب AJAX في التطبيقات التي تعمل React.

يكمن السبب الأكبر في الارتباك في حقيقة أن React يتم الإعلان عنها غالبًا كإطار ، ويستخدم الأشخاص المطلعون على الأطر مثل AngularJS لإجراء مكالمات API مع أشياء مثل $ http ومكتبات المساعدة المماثلة التي توفرها Angular نفسها. ليس هذا هو الحال في React لأن React هي مكتبة عرض "فقط" مع بعض أساليب إدارة الدولة ودورة الحياة *.

لذا - كيف يمكنك تقديم طلب AJAX عندما لا تتوفر مكتبة لك؟

أنت حر في استخدام أي مكتبة طرف ثالث! يمكنك استخدام تطبيق المتصفح الأصلي لجلب (قد ترغب أيضًا في تضمين ملف polyfill من whatwg-fetch للمتعلقين بمتصفحات قديمة) أو استخدام axios. أنا شخصياً أفضل الأخير لأن axios لديه واجهة برمجة تطبيقات بسيطة ويعمل في غالبية المتصفحات.

لتكون قادرًا على استخدام axios ، كل ما تحتاج إلى معرفته هو كيفية عمل الوعود - إذا كنت قد استخدمت jQuery.ajax من قبل ، فيجب أن تكون مستعدًا للذهاب.

يتيح شرح الاستخدام بناء على طلب GET بسيط:

axios.get ( 'http://example.com/posts/1')
  .ثم (الوظيفة (الاستجابة) {
    console.log (الاستجابة).
  })

نقوم بإرسال طلب GET إلى URI المحدد وتسجيل الاستجابة. يفترض Axios بالفعل أن الرد سيكون كائن JSON بالنسبة لنا ، لذلك لا نحتاج إلى تحديد أي خيارات إضافية.

كما ترون ، فإن تقديم طلب AJAX في React لا يختلف كثيرًا عن تقديمه باستخدام jQuery أو AngularJS. السؤال الحقيقي هو ...

متى أو أين يمكنك تقديم طلب أجاكس؟

عند إنشاء بنية التطبيق وسير العمل لديك ، عليك التفكير في كيفية تدفق البيانات في التطبيق الخاص بك:

  • أي من المكونات يجب أن يكون قادرًا على إرسال طلب لجلب بيانات جديدة؟
  • كيف سيتم تمرير البيانات إلى مكونات أخرى؟
  • هل سيكون هناك أكثر من إجراء يمكن أن يؤدي إلى جلب البيانات (تحميل تفاصيل المنشور على صفحتها ، وتحميل تفاصيل المنشور في صفحة الفهرس ، وإظهار منشورات مماثلة)؟

هناك عدة طرق "لأفضل الممارسات" لحل مشكلة مكان الاتصال بطلبات AJAX:

A - componentDidMount

المكون الخاص بك - باتباع مثالنا - سوف يتلقى دعامة تحتوي على معرّف المقالة أو إزاحتها ، ثم قم بطلب تحميل البيانات. قد يبدو تطبيقك مثل هذا:

// App.js
يجعل() {
  إرجاع (
    
              )؛ }
// BlogPost.js
componentDidMount () {
  axios.get ( `http://exmaple.com/blog/$ {this.props.id}`)
    .ثم (استجابة => this.setState (response.data))
}

استجابةً لتمرير المعرف كدعامة ، سيقوم المكون بإرسال طلب AJAX ومن ثم في طريقة التقديم () سوف يتحقق مما إذا كانت البيانات مضبوطة في الحالة - إذا كان الأمر كذلك ، فقم بتقديم المحتويات.

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

UPDATE: ذكر هذا القسم في الأصل أنه يجب عليك استخدام componentWillMount ولكن هذا غير مستحسن في الواقع - يجب إجراء جميع العمليات التي تسبب آثارًا جانبية ، مثل مكالمات ajax ، في componentDidMount ، componentDidUpdate.

ب - تمرير البيانات من المكون الأصل عبر الدعائم

بدلاً من جعل حاوية ، سنقوم بتمرير جميع البيانات مباشرة كدعائم وسنقوم بمهمة المكون الرئيسي لدينا بجلب البيانات. يتم ذلك في الغالب استجابة لتفاعل المستخدم في شكل تغيير عنوان URL مع جهاز توجيه التفاعل (نقاط المكافأة لاستخدام ربط onEnter للمسار).

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

ج - استخدام مدير الدولة مثل التمويه أو التكرار أو mobx

مساعدة كبيرة في فهم كيفية / يجب أن تتدفق البيانات من خلال التطبيق الخاص بك هي معرفة الإعادة أو مكتبة إدارة الدولة الأخرى (التمويه ، mobx). يشبه هذا الحل الموصوف في المثال "ب" ، ولكن بدلاً من تمرير البيانات من الأب إلى الطفل ، فإننا نحتفظ بها في مدير ولاية يعتني بوضع الدعائم. لم تعد البيانات تنتقل من مكون إلى آخر (لا نحتاج إلى تعيين الدعائم يدويًا - لم يعد هناك أجداد> أصل> طفل> سلاسل حفيد!) بل يتم نقلها مباشرةً من المتجر (فكر في المتجر اعتبارًا من كائن مفرد مفردة متاح عالميًا يحتفظ بجميع حالة التطبيق وبياناته - قد يبدو هذا مخيفًا ، ولكن تأكد من قراءة وثائق التنفيذ المحدد - أنا أبالغ في توضيح الأمور من أجل الحفاظ على هذا الأمر سهل للمستخدمين الجدد).

تتمثل المكافأة الإضافية لهذا الحل في أنه يمكننا الاتصال بطلب AJAX من أي مكان نحبه (استجابة لتغيير عنوان URL ، في componentWillMount ، كرد على حدث جانب الخادم يتم إرساله عبر مأخذ التوصيل) وطالما كان رده مرت إلى المتجر سيتم تحديث مكوناتنا وفقا لذلك.

الملحق أ - مما يجعلها تبدو سلسة

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

يجعل() {
  إذا (! this.props.title) {
    العودة <تحميل />
  }
  إرجاع (
    <المادة>
      

تحليل {this.props.title}        )؛ }

من خلال التحقق مما إذا كنا قد مررنا جميع الدعائم التي نحتاجها ، يمكننا أن نقرر إما أن نعرض محتوى المقالة أو يجب أن نبلغ المستخدم بأن المحتوى ما زال قيد التحميل. مثال على تنفيذ هذا الحل:

يسخر من المحتوى بينما يتم تحميله

الآن ، ألا يبدو ذلك أفضل بكثير؟ تحقق من المنشور الذي يحمل عنوان "تفكيك العنصر النائب لمحتوى Facebook" للتعرف على كيفية تحرّك Facebook للرسالة أثناء تحميلها. بالطبع يمكنك فقط وضع عجلة الغزل هناك إذا أردت :)

الملحق ب - تطبيق مثال

تطبيق مثال على تنفيذ الحل الموضح في النقطة B وسخرية المشاركة أثناء التحميل المسبق متاح في حسابي على github:

* بينما لا يزال التبسيط المفرط ، إلا أنه أقرب إلى الحقيقة من وصف React بأنه إطار عمل