تعتبر Fetch API من الواجهات الجديدة في الجافاسكريبت والتي جاءت ربما لتحل محل الواجهة القديمة XMLHttpRequest.

Fetch API جاءت بنفس فكرة XHR إلا أن هناك بعض الفروق الأساسية بينهما لعل أبرزها اعتماد Fetch API على الوعود Promises في عرض النتائج عوض دوال الرد Callbacks التي اعتمد عليها دائما XMLHttpRequest.

XMLHttpRequest

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

اقرأ أيضا :  الفرق الأساسي بين NativeScript و React Native

استعمال واجهة Fetch API

كما تلاحظون استعمال واجهة Fetch API هو أسهل وأجمل، خاصة مع استعمال دوال الوعود Promises API.
في داخل دالة then الأولى نضع الكود والشيفرة في حال نجاح عملية الإستدعاء، بينما دالة catch الثانية تستدعى عندما يكون هناك خطأ أثناء العملية.

إمكانية تسلسل الوعود Chaining Promises

نلاحظ في هذا المثال أننا استعمالنا دالة then عدة مرات وهذا من ميزات واجهة الوعود في الجافاسكريبت Promises API.
دالة then الأولى تقوم بجلب البيانات من ملف users.json ثم تقوم بعمل return للإجابة في حال نجاح عملية جلب البيانات من الملف users.json وتقوم بتمرير هذه الإجابة لدالة then التي تأتي بعدها والتي تقوم بتحويل هذه الإجابة response من نص إلى كائن JSON نتعامل معه بالجافاسكريبت ثم تقوم بتمريره هي الأخرى لدالة then التي تأتي بعدها لتقوم الأخيرة بالعمليات التي تريدها على هذا الأوبجكت (data).

أما دالة catch فهي تستدعى في حال وجود خطأ أثناء العملية برمتها فما إن يحدث خطأ في جلب ملف users.json حتى يتم استدعاؤها مباشرة.

الإعدادات

طبعا يمكن تمرير عدد من البارامترات لدالة fetch كنوع الطلب (GET, POST, PUT, DELETE, HEAD) وإعدادات الهيدر إلخ… كما يتضح في المثال أسفله :

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

Fetch API Browsers Support

 

للتعمق أكثر واكتشاف ميزات أخرى لهذه الواجهة الواعدة يرجى زيارة المراجع التالية :

 

ترك الرد

Please enter your comment!
Please enter your name here