دليل ES6 عملي حول كيفية تنفيذ طلبات HTTP باستخدام Fetch API

الصورة التي أنشأتها جاد جبران

في هذا الدليل ، سأوضح لك كيفية استخدام API Fetch (ES6 +) لتنفيذ طلبات HTTP إلى REST API مع بعض الأمثلة العملية التي من المحتمل أن تصادفها.

تريد أن ترى بسرعة أمثلة HTTP؟ انتقل إلى القسم 5. يصف الجزء الأول الجزء غير المتزامن من JavaScript عند العمل مع طلبات HTTP.

ملاحظة: تتم كتابة جميع الأمثلة في ES6 مع وظائف السهم.

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

للتعامل مع مورد ما ، نستخدم غالبًا طرق JS هذه (مستحسن) مثل .map () و .filter () و. تقليل ().

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

إليك ما سنتطرق إليه

  1. التعامل مع طلبات HTTP غير المتزامنة لـ JS
  2. ما هي أجاكس؟
  3. لماذا إحضار API؟
  4. مقدمة سريعة لجلب API
  5. إحضار API - أمثلة CRUD ← الأشياء الجيدة!

1. التعامل مع طلبات HTTP غير المتزامنة لـ JS

أحد أكثر الأجزاء صعوبة في فهم كيفية عمل JavaScript (JS) هو فهم كيفية التعامل مع الطلبات غير المتزامنة ، والتي تتطلب وفهم كيفية عمل الوعود وعمليات الاستعادة.

في معظم لغات البرمجة ، سنعمل على الاعتقاد بأن العمليات تحدث بالترتيب (بالتتابع). يجب تنفيذ السطر الأول قبل أن ننتقل إلى السطر التالي. هذا منطقي لأن هذه هي الطريقة التي نعمل بها البشر ونكمل المهام اليومية.

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

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

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

2. ما هي أجاكس

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

أجاكس هو اسم مضلل. قد تستخدم تطبيقات AJAX XML لنقل البيانات ، ولكن من الشائع أيضًا نقل البيانات كنص عادي أو نص JSON.
 - w3shools.com

اجاكس على طول الطريق؟

لقد رأيت أن العديد من المطورين يميلون إلى التحمس حقًا لوجود كل شيء في تطبيق صفحة واحدة (SPA) ، وهذا يؤدي إلى الكثير من الألم غير المتزامن! لكن لحسن الحظ ، لدينا مكتبات مثل Angular و VueJS و React تجعل هذه العملية أسهل بكثير وعملية.

بشكل عام ، من المهم أن يكون هناك توازن بين ما يجب إعادة تحميل الصفحة بأكملها أو أجزاء من الصفحة.

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

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

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

3. لماذا إحضار API؟

هذا يسمح لنا بإجراء طلبات HTTP التعريفي إلى خادم. لكل طلب ، يقوم بإنشاء وعد يجب حله من أجل تحديد نوع المحتوى والوصول إلى البيانات.

الآن ميزة Fetch API هي أنه مدعوم بالكامل من قبل النظام البيئي JS ، وهو أيضًا جزء من مستندات MDN Mozilla. وأخيراً وليس آخراً ، تعمل هذه الميزة في معظم المتصفحات (باستثناء IE). على المدى الطويل ، أعتقد أنه سيصبح الطريقة القياسية للاتصال بواجهة برمجة تطبيقات الويب.

ملحوظة! أدرك جيدًا طرق HTTP الأخرى مثل استخدام Observable مع RXJS ، وكيف يركز على إدارة / تسرب الذاكرة من حيث الاشتراك / إلغاء الاشتراك وما إلى ذلك. وربما سيصبح ذلك هو الطريقة القياسية الجديدة لتنفيذ طلبات HTTP ، من يدري؟
على أي حال ، في هذه المقالة ، أركز فقط على Fetch API ، لكنني قد أكتب في المستقبل مقالًا حول الملاحظة و RXJS.

4. مقدمة سريعة لجلب API

تُرجع طريقة الجلب () وعدًا يحل الاستجابة من الطلب لإظهار الحالة (ناجحة أم لا). إذا تلقيت هذه الرسالة وعدًا {} في شاشة سجل وحدة التحكم الخاصة بك ، فلا داعي للذعر - فهذا يعني في الأساس أن الوعد يعمل ، ولكن في انتظار الحل. حتى نحلها ، نحتاج إلى معالج .then () (رد الاتصال) للوصول إلى المحتوى.

باختصار ، نعرّف أولاً المسار (الجلب) ، ونطلب أولاً البيانات من الخادم (الطلب) ، ونعرِّف نوع المحتوى (النص الأساسي) ثالثًا ، وأخيرًا وليس آخرًا ، نصل إلى البيانات (الاستجابة).

إذا كنت تكافح من أجل فهم هذا المفهوم ، فلا تقلق. ستحصل على نظرة عامة أفضل من خلال الأمثلة الموضحة أدناه.

المسار الذي سنستخدمه للحصول على أمثلة لدينا
إرجاع https://jsonplaceholder.typicode.com/users // JSON

5. إحضار API - أمثلة HTTP

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

قالب إحضار API الأساسي:

ملحوظة! المثال أعلاه هو فقط لأغراض التوضيح. لن يعمل الرمز إذا قمت بتنفيذه.

إحضار أمثلة API

  1. عرض مستخدم
  2. عرض قائمة المستخدمين
  3. إنشاء مستخدم جديد
  4. حذف مستخدم
  5. تحديث مستخدم
ملحوظة! لن يتم إنشاء المورد بالفعل على الخادم ، ولكن سيعود نتيجة وهمية لتقليد خادم حقيقي.

1. عرض المستخدم

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

لاحظ فقط من خلال قراءة سلسلة الاستعلام / المستخدمين / 2 أننا قادرون على فهم / التنبؤ بما يفعله API. لمزيد من المعلومات حول كيفية كتابة واجهة برمجة تطبيقات REST عالية الجودة ، تحقق من هذه الإرشادات التي كتبها ماهيش هالدار.

مثال

2. عرض قائمة المستخدمين

المثال مماثل تقريبا للمثال السابق فيما عدا أن سلسلة الاستعلام هي / users ، وليس / users / 2.

مثال

3. إنشاء مستخدم جديد

هذا يبدو مختلفاً بعض الشيء عن المثال السابق. إذا لم تكن على دراية ببروتوكول HTTP ، فإنه يوفر لنا ببساطة عدة طرق حلوة مثل POST و GET و DELETE و UPDATE و PATCH و PUT. هذه الطرق هي أفعال تصف ببساطة نوع الإجراء المطلوب تنفيذه ، وتستخدم في الغالب لمعالجة المورد / البيانات على الخادم.

على أي حال ، من أجل إنشاء مستخدم جديد باستخدام Fetch API ، سنحتاج إلى استخدام الفعل HTTP POST. لكن أولاً ، نحتاج إلى تعريفه في مكان ما. لحسن الحظ ، هناك وسيطة اختيارية يمكن أن نمررها مع عنوان URL لتحديد الإعدادات المخصصة مثل نوع الأسلوب والنص وبيانات الاعتماد والرؤوس وما إلى ذلك.

ملاحظة: معلمات طريقة الجلب () متطابقة مع مُنشئ طلب ().

مثال

4. حذف مستخدم

لحذف المستخدم ، نحتاج أولاً إلى استهداف المستخدم بـ / users / 1 ، ثم نحدد نوع الطريقة الذي هو DELETE.

مثال

5. تحديث المستخدم

يتم استخدام الفعل HTTP PUT لمعالجة المورد الهدف ، وإذا كنت تريد إجراء تغييرات جزئية ، فستحتاج إلى استخدام PATCH. لمزيد من المعلومات حول ما تفعله أفعال HTTP هذه ، تحقق من ذلك.

مثال

خاتمة

الآن لديك فهم أساسي لكيفية استرداد مورد أو معالجته من الخادم باستخدام JavaScript's Fetch API ، وكذلك كيفية التعامل مع الوعود. يمكنك استخدام هذه المقالة كدليل لكيفية هيكلة طلبات API لعمليات CRUD.

أنا شخصياً أشعر أن واجهة برمجة التطبيقات (API) لـ Fetch تعتبر إعلانية ويمكنك بسهولة فهم ما يحدث دون أي تجربة ترميز تقنية.

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

إليك بعض المقالات التي كتبت حول النظام الإيكولوجي للويب إلى جانب نصائح وحيل البرمجة الشخصية.

  • مقارنة بين الزاوي و التفاعل
  • عقل الفوضى يؤدي إلى رمز الفوضى
  • المطورين الذين يرغبون باستمرار في تعلم أشياء جديدة
  • دليل عملي لوحدات ES6
  • تعلم هذه المفاهيم الأساسية على شبكة الإنترنت
  • عزز مهاراتك باستخدام طرق JavaScript المهمة هذه
  • البرنامج بشكل أسرع من خلال إنشاء أوامر bash مخصصة

يمكنك أن تجدني على المتوسط ​​حيث أنشر على أساس أسبوعي. أو يمكنك متابعتني على Twitter ، حيث أنشر نصائح وحيل تطوير الويب ذات الصلة مع القصص الشخصية.

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