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

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

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

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

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

لمزيد من التلاعب مورد، ونحن غالبا ما تستخدم هذه الأساليب JS (موصى به) مثل .map()، .filter()و .reduce().

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

إليك ما سنتناوله

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

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

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

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

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

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

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

2. ما هو أجاكس

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

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

- w3shools.com

AJAX طول الطريق؟

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

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

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

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

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

3. لماذا الجلب API؟

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

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

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

على أي حال ، في هذه المقالة أركز فقط على Fetch API ، ولكن قد أكتب في المستقبل مقالة حول Observable و RXJS.

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

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

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

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

The path we'll be using for our examples //jsonplaceholder.typicode.com/users // returns JSON

5. جلب API - أمثلة HTTP

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

نموذج الجلب الأساسي لـ API:

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

إحضار أمثلة API

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

1. إظهار المستخدم

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

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

مثال

2. إظهار قائمة المستخدمين

المثال مطابق تقريبًا للمثال السابق فيما عدا أن سلسلة الاستعلام تكون /usersوليست كذلك /users/2.

مثال

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

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

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

ملاحظة: fetch()معلمات الطريقة مماثلة لتلك الخاصة Request()بالمنشئ.

مثال

4. حذف مستخدم

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

مثال

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

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

مثال

استنتاج

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

أنا شخصياً أشعر أن Fetch API تعريفي ويمكنك بسهولة فهم ما يحدث دون أي خبرة فنية في الترميز.

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

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

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

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

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