كيفية إرسال طلبات POST باستخدام Fetch في جافا سكريبت

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

ما هي واجهة برمجة التطبيقات Fetch؟

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

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

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

كيفية إرسال طلبات Fetch POST باستخدام جافا سكريبت؟

الخطوة 1: إعداد الطلب

• حدد عنوان URL لنقطة النهاية الخاصة بالخادم لإرسال البيانات إليها. تتعامل نقاط النهاية مع طلبات POST والبيانات المرافقة.
• قم بتعيين طريقة HTTP إلى POST باستخدام خاصية method في خيارات الطلب لـ fetch().
• قم بتضمين معلومات إضافية مثل نوع المحتوى في رؤوس الطلب باستخدام خاصية headers ككائن.
• يحتوي جسم الطلب على البيانات المراد إرسالها إلى الخادم. استخدم تنسيق JSON (تدوين كائن جافا سكريبت) عن طريق تحويل كائن جافا سكريبت إلى سلسلة JSON باستخدام JSON.stringify().

الخطوة 2: بدء الطلب

استخدم وظيفة fetch() لبدء طلب POST.

الخطوة 3: معالجة الاستجابة

• وعد fetch() يحل إلى كائن استجابة عند النجاح. عالجه باستخدام .then().
• تحقق من response.ok لرموز حالة الخطأ مثل 400 أو 500. قُم بإلقاء خطأ لمعالجة الفشل.
• قم بتحليل جسم الاستجابة JSON إلى كائن جافا سكريبت باستخدام response.json().

الخطوة 4: معالجة الأخطاء

استخدم .catch() لمعالجة الأخطاء أثناء الطلب مثل مشاكل الشبكة أو الخادم.

مثال كامل: إنشاء عنصر Todo

const url = 'https://api.example.com/todos';
const data = { 
  title: 'شراء البقالة',
  completed: false
};

const jsonData = JSON.stringify(data);

const headers = new Headers();
headers.append('Content-Type', 'application/json');

fetch(url, {
  method: 'POST', 
  headers: headers,
  body: jsonData
})
.then(response => {
  if (!response.ok) {
    throw new Error(`خطأ HTTP! الحالة: ${response.status}`);
  }
  return response.json();
})
.then(responseData => {
  console.log('تم إنشاء Todo بنجاح:', responseData);  
})
.catch(error => {
  console.error('خطأ:', error);
});

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

Apidog - أداة قوية لإنشاء طلبات Fetch POST

Apidog، منصة تطوير واجهة برمجة التطبيقات تعتمد على التصميم أولاً، يمكن أن تكون أفضل صديق لمطور واجهة برمجة التطبيقات. يمكنك إنشاء طلبات Fetch POST باستخدام Apidog - واختبارها، وتزييفها، وتوثيقها بعد تصميمها!

توليد كود Fetch باستخدام Apidog

يمكنك الاستفادة من ميزة توليد كود العميل في Apidog لتزويدك بأصداف كود واجهة برمجة التطبيقات Fetch.

على أي واجهة برمجة التطبيقات أو طلب، يمكنك تحديد موقع وزر </>، ثم متابعة الضغط على زر توليد كود العميل، كما هو موضح في الصورة أعلاه.

مع Apidog، يمكنك إنشاء كود عميل Fetch. كل ما عليك فعله بعد ذلك هو نسخ الكود ولصقه في منصة البرمجة الخاصة بك.

إنشاء واختبار طلب Fetch POST باستخدام Apidog

ابدأ في إنشاء طلب Fetch POST الخاص بك باستخدام Apidog من خلال اتباع الخطوات أدناه. في Apidog، تشمل معلمات جسم طلب POST بيانات JSON، بيانات النموذج، XML، إلخ.

ابدأ بإنشاء طلب HTTP POST جديد على Apidog. قم بإدخال عنوان URL لواجهة برمجة التطبيقات REST مناسب. يمكنك استخدام مزيج من معلمات المسار والاستعلام، إلى جانب معرفات متعددة لإنشاء عنوان URL أكثر تحديدًا لواجهة برمجة التطبيقات.

تمرير بيانات JSON في طلب POST

على الرغم من الإدخال اليدوي لبيانات JSON الخاصة بك، يدعم Apidog أيضًا توليد أجسام طلب JSON تلقائيًا من القوالب، مما يوفر الوقت ويضمن هياكل JSON متسقة.

إليك دليل مفصل لبيانات JSON لـ POST، تحقق منها الآن.

تمرير بيانات النموذج في طلب POST

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

رفع الملفات في طلب POST

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

بمجرد الانتهاء من تضمين جميع معلمات الطلب، يمكنك حفظ واجهة برمجة التطبيقات POST بالنقر على زر حفظ.

لضمان أن طلب POST الخاص بك سريع الاستجابة، انقر على زر إرسال لاختبار الطلب.

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

الاستنتاج

طلبات POST لجلب هي مزيج من مزايا واجهة برمجة التطبيقات Fetch مع طلبات POST، مما يسمح لمطوري واجهة برمجة التطبيقات بإرسال البيانات إلى الخوادم بكفاءة بطريقة نظيفة وحديثة. إنها تقدم فوائد مثل:

• بنية أبسط مقارنة بالطرق القديمة (XHR).
• تحسين القراءةي مع فصل واضح للمهام.
• ميزات مدمجة لتسهيل التعامل مع الاستجابات والأخطاء.

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

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