كيفية استخدام JavaScript Fetch API للحصول على البيانات

  • 296 المشاهدات
  • قراءة دقيقة واحدة
هادي بهادوري
  • 22 يناير 2025
0 الأسهم
0
0
0
0
0
الأسهم
0
0
0
0

مقدمة

كان يُستخدم XMLHttpRequest سابقًا لإنشاء طلبات API. لم يكن يتضمن وعودًا ولم يُنتج شيفرة JavaScript دقيقة. مع jQuery، يمكنك استخدام صيغة jQuery.ajax() الأكثر دقة.

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

في هذا البرنامج التعليمي، سوف تقوم بإنشاء طلبات GET وPOST باستخدام واجهة برمجة التطبيقات Fetch.

المتطلبات الأساسية
  • بيئة تطوير محلية لـ Node.js.
  • فهم أساسيات البرمجة في JavaScript.
  • فهم الوعود في JavaScript.

الخطوة 1 - البدء في استخدام قواعد بيانات Fetch API

إحدى الطرق لاستخدام واجهة برمجة التطبيقات Fetch هي تمرير عنوان URL لواجهة برمجة التطبيقات fetch() كمعلمة:

fetch(url)

تُرجع دالة fetch() وعدًا. بعد دالة fetch()، أدخل دالة Promise then():

fetch(url)
.then(function() {
// handle the response
})

إذا تم حل الوعد المُعاد، فسيتم تنفيذ الدالة داخل دالة then(). تحتوي هذه الدالة على شيفرة لمعالجة البيانات المُستقبَلة من واجهة برمجة التطبيقات.

بعد طريقة then()، أدخل طريقة catch():

fetch(url)
.then(function() {
// handle the response
})
.catch(function() {
// handle the error
});

قد تكون واجهة برمجة التطبيقات (API) التي تستدعيها باستخدام دالة fetch() معطلة أو قد يحدث خطأ آخر. في هذه الحالة، يُعاد الوعد المرفوض. تُستخدم دالة catch لمعالجة الرفض. في حال حدوث خطأ أثناء استدعاء واجهة برمجة التطبيقات، سيتم تنفيذ الكود داخل دالة catch().

بعد فهم بناء الجملة لاستخدام واجهة برمجة التطبيقات Fetch، يمكنك الآن الانتقال إلى استخدام fetch() على واجهة برمجة التطبيقات الفعلية.

الخطوة 2 - استخدام Fetch للحصول على البيانات من واجهة برمجة التطبيقات (API)

سيعتمد نموذج الكود التالي على واجهة برمجة تطبيقات JSONPlaceholder. باستخدامها، ستحصل على عشرة مستخدمين وتعرضهم على الصفحة باستخدام JavaScript. سيعمل هذا البرنامج التعليمي على استرجاع البيانات من واجهة برمجة تطبيقات JSONPlaceholder وعرضها ضمن عناصر القائمة في قائمة المؤلفين.

ابدأ بإنشاء ملف HTML وإضافة عنوان وقائمة غير مرتبة تحتوي على معرفات المؤلف:

<h1>Authors</h1>
<ul id="authors"></ul>

أضف علامات النص البرمجي إلى أسفل ملف HTML، واستخدم مُحدِّد DOM للحصول على ul. استخدم getElementById مع authors كحجة:

<h1>Authors</h1>
<ul id="authors"></ul>
<script>
const ul = document.getElementById('authors');
</script>

تذكر أن المؤلفين هم من أنشأوا معرف ul السابق.

ثم قم بإنشاء قائمة عبارة عن DocumentFragment:

<script>
// ...
const list = document.createDocumentFragment();
</script>

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

قم بإنشاء متغير ثابت يسمى url والذي يحمل عنوان URL لواجهة برمجة التطبيقات الذي يقوم بإرجاع عشرة مستخدمين عشوائيين:

<script>
// ...
const url = 'https://jsonplaceholder.typicode.com/users';
</script>

الآن، باستخدام واجهة برمجة التطبيقات Fetch، اتصل بواجهة برمجة تطبيقات JSONPlaceholder باستخدام fetch() مع عنوان URL كحجة:

<script>
// ...
fetch(url)
</script>

أنت تستدعي واجهة برمجة تطبيقات الجلب (Fetch API) وتمرر عنوان URL إلى واجهة برمجة تطبيقات JSONPlaceholder. بعد ذلك، يتم استلام الاستجابة. مع ذلك، فإن الاستجابة التي تتلقاها ليست JSON، بل كائنًا بمجموعة من الدوال التي يمكن استخدامها حسب ما تريد فعله بالمعلومات. استخدم الدالة json() لتحويل الكائن المُعاد إلى JSON.

أضف طريقة then() التي تحتوي على دالة بمعلمة تسمى response:

<script>
// ...
fetch(url)
.then((response) => {})
</script>

يأخذ مُعامل الاستجابة قيمة الكائن المُعادة من fetch(url). استخدم دالة json() لتحويل الاستجابة إلى بيانات JSON:

<script>
// ...
fetch(url)
.then((response) => {
return response.json();
})
</script>

لا تزال بيانات JSON بحاجة إلى المعالجة. أضف عبارة then() أخرى مع دالة تأخذ وسيطة تسمى data:

<script>
// ...
fetch(url)
.then((response) => {
return response.json();
})
.then((data) => {})
</script>

في هذه الوظيفة، قم بإنشاء متغير يسمى author والذي يتم تعيينه على أنه مساوٍ للبيانات:

<script>
// ...
fetch(url)
.then((response) => {
return response.json();
})
.then((data) => {
let authors = data;
})
</script>

لكل مؤلف في قائمة "المؤلفين"، يجب إنشاء عنصر قائمة يعرض اسمه. دالة map() مناسبة لهذا النمط:

<script>
// ...
fetch(url)
.then((response) => {
return response.json();
})
.then((data) => {
let authors = data;
authors.map(function(author) {
});
})
</script>

في دالة الخريطة، أنشئ متغيرًا باسم li، مُعيَّنًا لـ createElement، مع استخدام li (عنصر HTML) كمُعامل. أنشئ أيضًا h2 للاسم وامتدادًا للبريد الإلكتروني:

<script>
// ...
fetch(url)
.then((response) => {
return response.json();
})
.then((data) => {
let authors = data;
authors.map(function(author) {
let li = document.createElement('li');
let name = document.createElement('h2');
let email = document.createElement('span');
});
})
</script>

سيحتوي عنصر h2 على اسم المؤلف. سيحتوي عنصر span على بريده الإلكتروني. تتيح لك سمة innerHTML واستيفاء السلسلة النصية القيام بذلك:

<script>
// ...
fetch(url)
.then((response) => {
return response.json();
})
.then((data) => {
let authors = data;
authors.map(function(author) {
let li = document.createElement('li');
let name = document.createElement('h2');
let email = document.createElement('span');
name.innerHTML = `${author.name}`;
email.innerHTML = `${author.email}`;
});
})
</script>

بعد ذلك، قم بإضافة عناصر DOM هذه باستخدام appendChild:

<script>
// ...
fetch(url)
.then((response) => {
return response.json();
})
.then((data) => {
let authors = data;
authors.map(function(author) {
let li = document.createElement('li');
let name = document.createElement('h2');
let email = document.createElement('span');
name.innerHTML = `${author.name}`;
email.innerHTML = `${author.email}`;
li.appendChild(name);
li.appendChild(email);
list.appendChild(li);
});
})
ul.appendChild(list);
</script>

لاحظ أن كل عنصر من عناصر القائمة يُضاف إلى قائمة DocumentFragment. بعد اكتمال الخريطة، تُضاف القائمة إلى عنصر القائمة غير المرتب ul.

بعد اكتمال دالتي then()، يمكنك الآن إضافة دالة catch(). ستسجل هذه الدالة أي أخطاء محتملة في وحدة التحكم:

<script>
// ...
fetch(url)
.then((response) => {
// ...
})
.then((data) => {
// ...
})
.catch(function(error) {
console.log(error);
});
// ...
</script>

هذا هو الكود الكامل للطلب الذي قمت بإنشائه:

<h1>Authors</h1>
<ul id="authors"></ul>
<script>
const ul = document.getElementById('authors');
const list = document.createDocumentFragment();
const url = 'https://jsonplaceholder.typicode.com/users';
fetch(url)
.then((response) => {
return response.json();
})
.then((data) => {
let authors = data;
authors.map(function(author) {
let li = document.createElement('li');
let name = document.createElement('h2');
let email = document.createElement('span');
name.innerHTML = `${author.name}`;
email.innerHTML = `${author.email}`;
li.appendChild(name);
li.appendChild(email);
list.appendChild(li);
});
}).
.catch(function(error) {
console.log(error);
});
ul.appendChild(list);
</script>

لقد نجحتَ للتو في إرسال طلب GET باستخدام واجهة برمجة تطبيقات JSONPlaceholder وواجهة برمجة تطبيقات Fetch. بعد ذلك، ستُرسل طلبات POST.

الخطوة 3 - التعامل مع طلبات POST

يتم استخدام طلبات الجلب افتراضيًا لطلبات GET، ولكن يمكنك استخدام جميع أنواع الطلبات الأخرى، وتغيير الرؤوس، وإرسال البيانات. لنبدأ بإنشاء طلب POST.

أولاً، قم بتضمين متغير ثابت يحمل الرابط إلى واجهة برمجة تطبيقات JSONPlaceholder:

const url = 'https://jsonplaceholder.typicode.com/users';

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

// ...
let data = {
name: 'Sammy'
}

بما أن هذا طلب POST، فعليك توضيحه. أنشئ كائنًا باسم fetchData:

// ...
let fetchData = {
}

يجب أن يحتوي هذا الكائن على ثلاثة مفاتيح: الطريقة والجسم والرأس:

// ...
let fetchData = {
method: 'POST',
body: JSON.stringify(data),
headers: new Headers({
'Content-Type': 'application/json; charset=UTF-8'
})
}

ستكون قيمة مفتاح الطريقة "POST". سيتم ضبط نص الصفحة على صيغة JSON.stringify لكائن البيانات المُنشأ حديثًا. ستكون قيمة الرؤوس "Content-Type": "application/json; charset=UTF-8′".

واجهة الرؤوس هي إحدى ميزات واجهة Fetch API التي تسمح لك بتنفيذ إجراءات على رؤوس طلبات واستجابات HTTP.

بإضافة هذا الكود، يُمكنك إنشاء طلب POST باستخدام واجهة برمجة تطبيقات Fetch. أضف عنوان URL وبيانات FetchData والوسائط إلى طلب Fetch POST الخاص بك:

// ...
fetch(url, fetchData)

تحتوي الدالة then() على كود يتعامل مع الاستجابة المستلمة من واجهة برمجة تطبيقات JSONPlaceholder:

// ...
fetch(url, fetchData)
.then(function() {
// Handle response you get from the API
});

هذا هو الكود الكامل للطلب الذي قمت بإنشائه:

const url = 'https://jsonplaceholder.typicode.com/users';
let data = {
name: 'Sammy'
}
let fetchData = {
method: 'POST',
body: JSON.stringify(data),
headers: new Headers({
'Content-Type': 'application/json; charset=UTF-8'
})
}
fetch(url, fetchData)
.then(function() {
// Handle response you get from the API
});

يمكنك أيضًا تمرير fetch() إلى كائن Request.

const url = 'https://jsonplaceholder.typicode.com/users';
let data = {
name: 'Sammy'
}
let request = new Request(url, {
method: 'POST',
body: JSON.stringify(data),
headers: new Headers({
'Content-Type': 'application/json; charset=UTF-8'
})
});
fetch(request)
.then(function() {
// Handle response you get from the API
});

باستخدام هذا النهج، يمكن استخدام الطلب باعتباره الحجة الوحيدة لـ fetch()، واستبدال url وfetchData.

أنت الآن تعرف طريقتين لإنشاء طلبات POST وتنفيذها باستخدام واجهة برمجة التطبيقات Fetch.

نتيجة

على الرغم من أن Fetch API لا يدعمه جميع المتصفحات حتى الآن، إلا أنه يعد بديلاً رائعًا لـ XMLHttpRequest.

في هذه المقالة:
,
تم كتابة التدوينة بواسطة:
يتبع
اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

المقال السابق
المقال التالي
قد يعجبك أيضاً