انشاء data من خلال الدالة fetch

السلام عليكم ورحمة الله تعالى وبركاته،

ستحتاج أولا إلى تحديد نوع البيانات التي تريد إرسالها، مثل بيانات تسجيل مستخدم أو معلومات منتج، ثم تحويلها إلى صيغة يمكن لدالة fetch أن تفهمها وعادة تكون JSON بداية تبدأ بإنشاء كائن JavaScript يمثل البيانات ليكن كالتالي:

const myData = {
  name: "Student1",
  email: "student1@hsoub.com",
  age: 25
};

ثمّ تستخدم fetch لإرسال هذه البيانات إلى خادم (backend) باستخدام POST وداخل fetch تقوم بتحديد الرابط الذي ترسل إليه، ثم تضيف كائن الإعدادات الذي يحتوي على 'method: 'POST' وال headers المناسبة مثل:

headers: {
  "Content-Type": "application/json"
}

وبعدها تمرر body وهو عبارة عن JSON.stringify(myData) لتحويل البيانات إلى نص بصيغة JSON ليكون في الأخير كالتالي:

fetch("https://example.com/api/submit", {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify(myData)
})
.then(response => response.json())
.then(data => {
  console.log("تم الإرسال بنجاح:", data);
})
.catch(error => {
  console.error("حدث خطأ:", error);
});

حسبما فهمته منك فأنت تريد أن تعرف كيف تنشئ بيانات خاصة بك مثل الاسم أو العمر داخل كود JavaScript ثم ترسل هذه البيانات إلى سيرفر باستخدام دالة fetch وهذا ما يسمى بإرسال طلب HTTP يحتوي على body فيه بيانات تكون من اختيارك إن كان كذلك فسأفترض أنك تريد إرسال تقييم وتعليق حول فيلم معين أولا نبدأ بإنشاء كائن (Object) يحتوي على البيانات الخاصة بهذا التقييم:

const review = {
  movieId: 101,
  rating: 4.8,
  comment: "الفيلم جيد."
};

الآن نريد إرسال هذه البيانات إلى الخادم عبر fetch نستخدم الطريقة POST، ونحدد أن نوع المحتوى هو JSON، ثم نضع البيانات داخل الخاصية body بعد تحويلها إلى نص باستخدام JSON.stringify:

fetch("https://example.com/api/reviews", {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify(review)
})
.then(response => response.json())
.then(result => {
  console.log("تم إرسال التقييم بنجاح:", result);
})
.catch(error => {
  console.error("حدث خطأ أثناء إرسال التقييم:", error);
});

لاحظ هنا أنّ:

• movieId يحدد معرف الفيلم الذي يتم تقييمه.
• rating هو التقييم الرقمي مثلا من 5.
• comment هو تعليق المستخدم على الفيلم.

هل تقصد إرسال بيانات من خلال الدالة fetch إلى API معين ؟

إذا كان الأمر كذلك فيوجد العديد من الطرق لذلك ولكن يجب أن يكون نوع الطلب هو POST لتستطيع إرسال البيانات .

فأولا لو أردت إرسال البيانات كما لو أنك تقوم بإرسال نموذج form فمثلا لو أردت إرسال النموذج form من خلال ajax أو fetch دون الحاجة لإعادة تحديث الصفحة فيمكنك إستخدام FormData هكذا :

const formData = new FormData();
formData.append('username', 'test');
formData.append('email', 'test@example.com');

fetch('https://api.example.com/register', {
  method: 'POST',
  body: formData
})
.then(response => {
  if (!response.ok) {
    throw new Error(`HTTP error! status: ${response.status}`);
  }
  return response.json(); // أو response.text() حسب استجابة الخادم
})
.then(data => {
  console.log('تم إرسال بيانات النموذج بنجاح:', data);
})
.catch(error => {
  console.error('حدث خطأ أثناء إرسال بيانات النموذج:', error);
});

فهنا كما لو انك قمت بعمل submit لنموذج form التالي ولكن من خلال الدالة fetch :

<form method="POST" enctype="multipart/form-data">
  <input type="text" name="username">
  <input type="text" name="email">
</form>

الطريقة الثانية إذا كان الخادم أو ال API يتوقع البيانات على هيئة json يمكنك إستخدام الكود التالي :

const myData = {
  name: "Ahmed",
  age: 30,
  country: "EG"
};

fetch('https://api.example.com/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json' // مهم جدا للخادم لفهم أنك ترسل JSON
  },
  body: JSON.stringify(myData) // تحويل الكائن إلى JSON string
})
.then(response => {
  if (!response.ok) { 
    throw new Error(`HTTP error! status: ${response.status}`);
  }
  return response.json();
})
.then(data => {
  console.log('تم إرسال البيانات بنجاح:', data);
})
.catch(error => {
  console.error('حدث خطأ أثناء إرسال البيانات:', error);
});

لاحظ كيف أنشأنا كائن يحوي البيانات وقمنا بتحويله إلى نص Json من خلال الدالة JSON.stringify وأرسلناه في ال body.

والطريقة الأخيرة لو أردت فقط إرسال نص أى text عادي هكذا :

const myTextData = "Hello from fetch";

fetch('https://api.example.com/message', {
  method: 'POST',
  headers: {
    'Content-Type': 'text/plain' // تحديد نوع المحتوى كنص عادي
  },
  body: myTextData
})
.then(response => {
  if (!response.ok) {
    throw new Error(`HTTP error! status: ${response.status}`);
  }
  return response.text();
})
.then(data => {
  console.log('تم إرسال النص بنجاح:', data);
})
.catch(error => {
  console.error('حدث خطأ أثناء إرسال النص:', error);
});