دليل المبتدئين لاستخراج البيانات باستخدام (AJAX, Fetch API & Async/Await)

المقدمة

في هذه المقالة سوف أقوم بشرح كيفية استخراج البيانات بشكل غير متزامن من واجهة برمجة التطبيقات (API) الخارجية باستخدام تقنيات الويب مثل: AJAX، Fetch API و Async/Await.

كيف نستخرج البيانات من API خارجي

AJAX

AJAX يرمز إلى JavaScript غير متزامن، وXML، وهي مجموعة من تقنيات الويب لإرسال واستقبال البيانات بشكل غير متزامن من عميل أو خادم (server)، ويتم ذلك خلف المشهد ولا تحتاج إلى إعادة تحميل الصفحة. JSON و هي اختصار لـ (Javascript Object Notation) وتعني كائن تدوين JavaScript، قامت باستبدال XML وهي اختصار لـ (eXtensible Markup Language) وتعني لغة التوصيف الموسعة. معظم الAPI’s تُرجع بيانات JSON، يمكن أيضاً ل AJAX ارجاع نص عادي.

وصف لكيفية عمل AJAX

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

سأوضح في الكود التالي كيف نحصل على البيانات من Github API وهي API خارجية بواسطة AJAX.

وفي الصورة التالية البيانات المستخرجة

جلب ال(API (fetch API

إنه أحدث معيار للتعامل مع HTTPRequest، إنه جزء من كائن النافذة (window object)، ويمكننا بسهولة جلب البيانات من واجهة برمجة التطبيقات (API) الخارجية. هذا الجلب يُرجع الوعود (promises).

سأوضح في الكود التالي كيف نحصل على البيانات من Github API وهي API خارجية بواسطة جلب الAPI (fetch API).

وفي الصورة التالية البيانات المستخرجة

التزامن والانتظار (Async/Await)

إنه جزء من معيار متصفح ES7، وهو الآن مطبق بالكامل في متصفح Chrome. نضيف التزامن (async) للدالة ويُرجع لنا وعد (promise).

سأوضح في الكود التالي كيف نحصل على البيانات من Github API وهي API خارجية بواسطة التزامن والانتظار (Async/Await).

وفي الصورة التالية البيانات المستخرجة

ملاحظة 

يمكن استخدام أي من الطرق الثلاث لجلب البيانات، في الواقع أفضل استخدام طريقة جلب API (fetch API)، وهناك العديد من الطرق (axios،  superagent، إلخ) باستثناء ثلاثة طرق، لم تتم مناقشتها في هذا المقال. إن واجهات برمجة التطبيقات (API) مختلفة، وتختلف في كيفية أخذ الطلب، وتختلف في كيفية الاستجابة للطلب، ويتم توفير الوثائق أو المستند الخاص بواجهة برمجة التطبيقات (API) الخارجية لإرشادك.

أتمنى أن تكونوا استمتعتم بالمقالة، شكرا على القراءة.