JavaScript Fetch API Tutorial مع JS Fetch Post and Header Examples

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

عندما ظهر AJAX لأول مرة في عام 1999 ، أظهر لنا طريقة أفضل لبناء تطبيقات الويب. كان AJAX علامة فارقة في تطوير الويب وهو المفهوم الأساسي وراء العديد من التقنيات الحديثة مثل React.

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

Crash Course on REST APIs

نحن الآن في عصر RESTful APIs. ببساطة ، تتيح لك واجهة برمجة تطبيقات REST دفع البيانات وسحبها من مخزن البيانات. قد يكون هذا إما قاعدة بياناتك أو خادم جهة خارجية مثل Twitter API.

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

  • GET  - احصل على البيانات من API. على سبيل المثال ، احصل على مستخدم تويتر بناءً على اسم المستخدم الخاص به.
  • البريد  - دفع البيانات إلى واجهة برمجة التطبيقات. على سبيل المثال ، قم بإنشاء سجل مستخدم جديد بالاسم والعمر وعنوان البريد الإلكتروني.
  • PUT  - تحديث سجل موجود ببيانات جديدة. على سبيل المثال ، قم بتحديث عنوان البريد الإلكتروني للمستخدم.
  • حذف  - إزالة سجل. على سبيل المثال ، احذف مستخدمًا من قاعدة البيانات.

هناك ثلاثة عناصر في كل واجهة برمجة تطبيقات REST. الطلب والاستجابة والعناوين.

الطلب  - هذه هي البيانات التي ترسلها إلى واجهة برمجة التطبيقات ، مثل معرف الطلب لجلب تفاصيل الطلب.

الاستجابة  - أي بيانات تحصل عليها من الخادم بعد نجاح / فشل الطلب.

الرؤوس  - بيانات وصفية إضافية تم تمريرها إلى واجهة برمجة التطبيقات لمساعدة الخادم على فهم نوع الطلب الذي يتعامل معه ، على سبيل المثال "نوع المحتوى".

الميزة الحقيقية لاستخدام REST API هي أنه يمكنك بناء طبقة API واحدة لتطبيقات متعددة للعمل معها.

إذا كانت لديك قاعدة بيانات تريد إدارتها باستخدام تطبيق الويب والجوال وسطح المكتب ، فكل ما تحتاجه هو طبقة REST API واحدة.

الآن بعد أن عرفت كيف تعمل REST APIs ، فلنلقِ نظرة على كيفية استهلاكها.

XMLHttpRequest

قبل سيطرة JSON على العالم ، كان التنسيق الأساسي لتبادل البيانات هو XML. XMLHttpRequest () هي وظيفة JavaScript تتيح إمكانية جلب البيانات من واجهات برمجة التطبيقات التي عرضت بيانات XML.

أعطانا XMLHttpRequest خيار جلب بيانات XML من الواجهة الخلفية دون إعادة تحميل الصفحة بأكملها.

نمت هذه الوظيفة منذ الأيام الأولى لكونها XML فقط. الآن يدعم تنسيقات البيانات الأخرى مثل JSON والنص العادي.

لنكتب استدعاء XMLHttpRequest بسيطًا إلى واجهة برمجة تطبيقات GitHub لجلب ملف التعريف الخاص بي.

// function to handle success function success() { var data = JSON.parse(this.responseText); //parse the string to JSON console.log(data); } // function to handle error function error(err) { console.log('Request Failed', err); //error details will be in the "err" object } var xhr = new XMLHttpRequest(); //invoke a new instance of the XMLHttpRequest xhr.onload = success; // call success function if request is successful xhr.onerror = error; // call error function if request failed xhr.open('GET', '//api.github.com/users/manishmshiva'); // open a GET request xhr.send(); // send the request to the server.

سيرسل الكود أعلاه طلب GET إلى //api.github.com/users/manishmshiva لجلب معلومات GitHub الخاصة بي في JSON. إذا كانت الاستجابة ناجحة ، فسيتم طباعة JSON التالي على وحدة التحكم:

إذا فشل الطلب ، فسيتم طباعة رسالة الخطأ هذه إلى وحدة التحكم:

جلب API

Fetch API هو إصدار أبسط وسهل الاستخدام من XMLHttpRequest لاستهلاك الموارد بشكل غير متزامن. يتيح لك Fetch العمل مع واجهات برمجة تطبيقات REST مع خيارات إضافية مثل تخزين البيانات مؤقتًا وقراءة استجابات البث والمزيد.

الاختلاف الرئيسي هو أن Fetch يعمل مع الوعود ، وليس عمليات الاسترجاعات. ابتعد مطورو JavaScript عن عمليات الاسترجاعات بعد تقديم الوعود.

بالنسبة إلى تطبيق معقد ، قد تتعود بسهولة على كتابة عمليات رد نداء تؤدي إلى جحيم رد الاتصال.

مع الوعود ، من السهل كتابة الطلبات غير المتزامنة والتعامل معها. إذا كنت جديدًا على الوعود ، يمكنك معرفة كيفية عملها هنا.

إليك كيف ستبدو الوظيفة التي كتبناها سابقًا إذا استخدمت fetch () بدلاً من XMLHttpRequest:

// GET Request. fetch('//api.github.com/users/manishmshiva') // Handle success .then(response => response.json()) // convert to json .then(json => console.log(json)) //print data to console .catch(err => console.log('Request Failed', err)); // Catch errors

يجب أن تكون المعلمة الأولى لوظيفة الجلب هي عنوان URL دائمًا. ثم تأخذ أداة الجلب كائن JSON ثانيًا مع خيارات مثل الطريقة والعناوين ونص الطلب وما إلى ذلك.

هناك فرق مهم بين كائن الاستجابة في XMLHttpRequest و Fetch.

يعرض XMLHttpRequest البيانات كاستجابة بينما يحتوي كائن الاستجابة من Fetch على معلومات حول كائن الاستجابة نفسه. يتضمن ذلك الترويسات ، ورمز الحالة ، وما إلى ذلك. ونحن نسمي وظيفة "res.json ()" للحصول على البيانات التي نحتاجها من كائن الاستجابة.

الفرق المهم الآخر هو أن Fetch API لن تتسبب في خطأ إذا كان الطلب يُرجع رمز الحالة 400 أو 500. سيظل يتم تمييزها على أنها استجابة ناجحة وتمريرها إلى وظيفة "then".

يؤدي الجلب إلى حدوث خطأ فقط في حالة مقاطعة الطلب نفسه. للتعامل مع ردود 400 و 500 ، يمكنك كتابة منطق مخصص باستخدام "response.status". ستمنحك خاصية "الحالة" رمز الحالة للرد المرتجع.

عظيم. الآن بعد أن فهمت كيفية عمل Fetch API ، دعنا نلقي نظرة على بعض الأمثلة الأخرى مثل تمرير البيانات والعمل مع الرؤوس.

العمل مع الرؤوس

يمكنك تمرير الرؤوس باستخدام خاصية "headers". يمكنك أيضًا استخدام مُنشئ الرؤوس لتحسين هيكلة الكود الخاص بك. لكن تمرير كائن JSON إلى خاصية "headers" يجب أن يعمل في معظم الحالات.

fetch('//api.github.com/users/manishmshiva', { method: "GET", headers: {"Content-type": "application/json;charset=UTF-8"} }) .then(response => response.json()) .then(json => console.log(json)); .catch(err => console.log(err));

تمرير البيانات إلى طلب POST

بالنسبة إلى طلب POST ، يمكنك استخدام خاصية "body" لتمرير سلسلة JSON كمدخلات. لاحظ أن نص الطلب يجب أن يكون سلسلة JSON بينما يجب أن تكون الرؤوس كائن JSON.

// data to be sent to the POST request let _data = { title: "foo", body: "bar", userId:1 } fetch('//jsonplaceholder.typicode.com/posts', { method: "POST", body: JSON.stringify(_data), headers: {"Content-type": "application/json; charset=UTF-8"} }) .then(response => response.json()) .then(json => console.log(json)); .catch(err => console.log(err));

لا يزال Fetch API قيد التطوير النشط. يمكننا توقع ميزات أفضل في المستقبل القريب.

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

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

أكتب بانتظام عن التعلم الآلي والأمن السيبراني و DevOps. يمكنك الاشتراك في رسالتي الإخبارية الأسبوعية هنا.