ما أهمية ال headers في بروتوكوا HTTP؟؟

--في السطر الخاص ب json.stringfy هنا نقوم بتحويل الكائن product إلى الصيغة json حتى نقوم بإرساله إلى المُخدم لأن خادم الويب لا يمكنها أن تفهم الكائنات الخاصة ب javascript فقط يمكنها فهم السلاسل النصية.

أي يتم تحويل كائن بهذه الصورة:

let product = {

	id: '64564545',
	productName: 'iphone',
	price: 1300

}

إلى هذه الصورة:

 {

	"id": "64564545",
	"productName": "iphone",
	"price": 1300

}

--أما السطر الخاص ب conten-type فهنا نقوم بتحديد نوع البيانات التي سيتم إرسالها إلى الخادم هل ستكون text/html أم json كما في المثال السابق، هنا نحن نريد إرسال بيانات من النوع json لذلك قمنا باستخدام النوع application/json

--أما السطر الخاص ب

const id = (await response.json()).name

في السطر الخاص ب const response نحن قمنا بإرسال طلب إلى الخادم و ننتظر منه أن يعيد لنا بيانات ما على صورة json أيضًا. من البيانات التي سيعيدها هي name و هي التي تحمل ال id الخاص بالمنتج الذي تم إرساله إلى الخادم.

لذلك هنا ()await response.json نحن ننتظر البيانات التي سيعيدها الخادم و بعد ذلك نقوم باستخراج قيمة الخاصية name و تخزينها في المتغير id

مرحبا أحمد،

يستخدم الـ header في بروتوكول HTTP لإعطاء معلومات عن حزمة البيانات المرسلة (تضاف بيانات من المرسل لتوضيح ماهية المعلومات الممررة و نوعها و يتسنى للمستقبل فلترة و إضافة شروط خاصة مناسبة لهذه المعلومات)

مثلا في حال أردنا إرسال معلومات على شكل صفحة HTML نستخدم التالي:

Content-Type: text/html; charset=UTF-8

في حال أردنا إرسال بيانات كبيرة الحجم و سمحنا بتقسيمها لأجزاء أصغر لتسريع عملية النقل نستخدم التالي :

Content-Type: multipart/form-data; boundary=something

و في حالتك نستخدم 

Content-Type: application/json; 

لأننا نستخدم صيغة JSON في نقل البيانات.

يمكننا أيضا نقل البيانات باستخدام XML كمثال إضافي:

Content-Type: application/xml

مثال على حزمة البيانات المرسلة باستخدام HTTP و طريقة POST :

• Header يمثل الجزء الأول من الكود اللاحق:
• Body يمثل البيانات في الجزء الثاني:

POST /api/2.2/MyProduct HTTP/1.1
HOST: my-server
Content-Type:application/json
Accept:application/json

{
  "product": {
    "name": "TV",
    "color": "black",
    "price": "500",
    "id": "id_7788_Gtkk",
    "site": {
      "country": "Germany",
      "city": "Munich"
    }
  }
}

شرح عام حسب الشيفرة لديك:

نحن نريد إضافة منتج، نقوم بإرسال بياناته للسيرفر و من ثم يقوم السيرفر بتخزين هذه البيانات و إضافة رقم تعريف خاص للمنتج يرسله السيرفر بعد إضافة البيانات

أي اعتبر نفسك تريد إضافة منتج لقاعدة بيانات فتحدد الاسم و اللون و السعر .. وترسلها بدون id لأنه يتم تشكيله تلقائيا بطريقة تمنع التكرار في القاعدة فيمنع وضعه يدويا في التطبيقات الاحترافية.

بعد إرسال معلومات المنتج الجديد نريد المعرف الخاص به لنتعامل على أساسه فهو يمثل المنتج بشكل مختصر، حيث قمنا بجلبه عن طريق استعلام response (مع باقي البيانات) وهو مخزن في الخاصية name في مثالنا.

JSON stringify تحول غرض جافاسكربت لسلسلة نصية (أي تدمج الخصائص المختلفة معا على شكل String)

للتعلم أكثر أنصحك بمطالعة عمل بروتوكول http و قراءة توثيق حسوب من هنا

بالتوفيق