ما وظيفة الكود التالي

أولا في هذا الكود نقوم بتعريف دالة Function تسمى getProducts ووظيفتها الرئيسية هي جلب المنتجات من الإنترنت (API) وعرضها لديك في التطبيق.

في methods في Vue.js هو عبارة عن كائن (Object) يحتوي على كل الدوال (functions) اللتي يمكنك إستخدامها في المكون الحالي و getProducts هي دالة قمنا بتعريفها لنستطيع إستخدامها في المكون لدينا .

قمنا بإستخدام async وهي تعني إن الدالة غير متزامنة (Asynchronous) لنستطيع إستخدام await مع fetch هنا .

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

وبعد تحويله إلى json إستخدمنا then نقوم بوضعه في المتغير (أو الخاصية) التي إسمها products وهكذا نستطيع عرضها في المكون لدينا.

إذا الكود هنا يرسل طلب API لإحضار قائمة بالمنتجات . ونقوم بالإنتظار حتي يعدي الطلب البيانات لنا .ونقوم بتحويلها لصيغة json لنتعامل بها بسهولة. وأخيرا مخزن تلك البيانات في الخاصية لديك في المكون لنستطيع إستخدامها.

هذا عبارة عن كائن اسمه methods وتكون بداخله كل الدوال الخاصة بالمكون في Vue.js فلدينا الآن دالة تدعى getProducts وهي دالة غير متزامنة -أي أنها يمكن أن تنتظر أوامر تأخذ وقتا في التنفيذ، مثل جلب البيانات من الإنترنت - وقمنا بجعلها غير متزامنة عن طريقة إضافة async أمام تعريفها لنستطيع بعد ذلك بداخل هذه الدالة استخدام await مع fetch تقوم الدالة fetch بإرسال طلب إلى 

https://dummyjson.com/products

بعد ذلك نقوم باستخدام then لمعرفة الرد الذي حصلنا عليه وبداخل then نقوم بتحويل الرد إلى صيغة نستطيع التعامل معاها بواسطة الدالة ()json لتحويل الرد إلى صيغة JSON (وهي صيغة يمكننا التعامل معها في JavaScript)

ثم قمنا باستخدام then مرة أخري واستخدام البيانات العائدة من الطلب واسنادها إلى الخاصية this.products ليتم عرضها بالمكون.

أولاً DummyJSON هي خدمة مجانية توفر واجهة برمجة تطبيقات (API) وهمية لبيانات JSON تجريبية والرابط

 https://dummyjson.com/products 

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

أما بالنسبة للكود فلدينا 

methods: { ... }

هذا الجزء يُستخدم لتعريف الدوال (Functions) أو الأساليب (Methods) المخصصة التي يمكن استخدامها داخل مكون برمجي معين. 

async getProducts()

async هذه الكلمة تشير إلى أن هذه الدالة غير متزامنة (Asynchronous). ماذا يعني ذلك؟ تعني أن هذه الدالة ستنفذ عملية قد تستغرق بعض الوقت (مثل الاتصال بالإنترنت)، ولن تعيق تنفيذ بقية الشيفرة البرمجية أثناء انتظارها اكتمال هذه العملية. ستعمل في الخلفية، وعندما تنهي عملها، ستعيد النتيجة.

await fetch('https://dummyjson.com/products')

fetch() أداة مدمجة في JavaScript تستخدم لتقديم طلبات (Requests) لجلب الموارد من الشبكة، مثل البيانات أو الملفات. 

await تستخدم مع الدوال async. وتعني: "انتظر هنا حتى تنهي عملية fetch عملها وتعيد لي الاستجابة (Response)". أي أننا لن ننتقل إلى الخطوة التالية إلا بعد أن ترجع fetch نتيجة.

.then((response) => response.json())

.then() هذه خطوة تنفذ بعد أن تنجح العملية السابقة (وهي fetch) وتعيد لنا استجابة. عملية fetch ترجع كائنًا يسمى response وعندما تأتينا الاستجابة (response)، نقوم بتحويلها إلى صيغة يمكن لـ JavaScript فهمها والتعامل معها بسهولة، وهي صيغة JSON". 

.then((data) => this.products = data)

عندما تأتي البيانات بصيغة JSON (وقد أسميناها هنا data)، نقوم بتخزينها في متغير اسمه products