جاري التحميل...
جاري التحميل...
import/export، Promises، async/await، fetch API، JSON، معالجة الأخطاء
في هذا الدرس سنتعلم من أهم مفاهيم جافاسكريبت الحديثة: الوحدات والبرمجة غير المتزامنة. هذه المفاهيم هي حجر الأساس في بناء تطبيقات الويب الحديثة والفعالة.
الوحدات هي طريقة لتقسيم الكود إلى ملفات صغيرة مستقلة يمكن إعادة استخدامها وتنظيمها منطقيًا.
البرمجة غير المتزامنة هي طريقة لتنفيذ العمليات التي تستغرق وقتًا، مثل جلب البيانات من خادم، دون حظر تنفيذ باقي الكود.
💡 لماذا هذا الدرس مهم؟:
كل تطبيق ويب حديث يعتمد على الوحدات لتنظيم الكود وغير المتزامنة لجلب البيانات من الخوادم. بدون فهم هذه المفاهيم، لن تتمكن من بناء تطبيقات واقعية.
قبل ES6، كانت جافاسكريبت بها مشكلة في تنظيم الكود. لم تكن هناك طريقة رسمية لتقسيم الكود إلى ملفات مستقلة.
وحدات ES جاءت لحل هذه المشكلة من خلال توفير نظام موحد وقياسي لتنظيم الكود. البرمجة غير المتزامنة جاءت لحل مشكلة حظر تنفيذ الكود أثناء العمليات البطيئة.
قبل وحدات ES، كان كل الكود في ملف واحد أو عدة ملفات مرتبطة بطريقة غير منظمة. هذا تسبب في تعارض الأسماء وصعوبة الصيانة وغموض التبعيات.
بالنسبة للبرمجة غير المتزامنة، المشكلة هي أن بعض العمليات مثل جلب البيانات من خادم بعيد تستغرق وقتًا طويلًا. بدون غير المتزامنة، سيتجمد المتصفح ويتوقف عن الاستجابة.
أولًا: الوحدات - فكر في الوحدات كفصول في كتاب: كل فصل يغطي موضوعًا محددًا. بدلاً من كتابة كل شيء في صفحة طويلة واحدة، تقسم الكود إلى ملفات صغيرة كل منها مسؤول عن شيء واحد.
💡 تشبيه بسيط::
تخيل بناء منزل: بدلاً من استخدام قطعة خشب كبيرة لكل شيء، تقطع قطع بأحجام مناسبة لكل غرفة. ملف utils.js يحتوي على أدوات مساعدة، api.js يتعامل مع الخوادم، auth.js يدير المصادقة، إلخ.
ثانيًا: البرمجة غير المتزامنة - المتصفح لا يتوقف عن العمل أثناء انتظار نتيجة عملية بطيئة. بدلاً من ذلك، ينفذ باقي الكود ويعود لمعالجة النتيجة عند الجاهزية.
الوعود (Promises) هي الطريقة الأساسية للتعبير عن عملية غير متزامنة. الوعيد يمثل قيمة ستكون جاهزة في المستقبل، أو خطأ قد يحدث.
async/await هو حلوى صياغية فوق الوعود يجعل الكود أبسط وأوضح.
fetch API هي الدالة المضمنة في المتصفح لجلب البيانات من الخوادم.
1. تصدير واستيراد الوحدات
2. وعيد بسيط
3. async/await - البديل الأسهل
التطبيق العملي: جلب بيانات المستخدم من API
متقدم: Promise.all و Promise.race
تحويل JSON
1. كيف تعمل وحدات ES؟
2. كيف تعمل الوعود و async/await؟
جافاسكريبت خيط واحد، مما يعني أنها تنفذ كودًا واحدًا في كل مرة. للتعامل مع العمليات البطيئة دون حظر الخيط الرئيسي، تستخدم حلقة الحدث (Event Loop).
3. مثال مبسط على حلقة الحدث
ما هو الفرق الرئيسي بين async/await و .then() عند التعامل مع الوعود؟
ماذا يحدث عندما يُرجع الخادم حالة HTTP مثل 404 أو 500 عند استخدام fetch()؟
أنشئ نظام وحدات يجلب البيانات من API ويعالج الأخطاء بشكل صحيح.
الحل:
async function fetchUserData(userId) {
try {
const response = await fetch(
`https://jsonplaceholder.typicode.com/users/${userId}`
);
if (!response.ok) throw new Error("فشل في جلب البيانات");
const data = await response.json();
console.log("معلومات المستخدم:", data.name);
return data;
} catch (error) {
console.error("خطأ:", error.message);
}
}
fetchUserData(1);
async function fetchMultipleUsers() {
const ids = [1, 2, 3];
const promises = ids.map(id =>
fetch(`https://jsonplaceholder.typicode.com/users/${id}`)
.then(r => r.json())
);
const users = await Promise.all(promises);
console.log("جميع المستخدمين:", users);
}
fetchMultipleUsers();أنشئ تطبيقًا غير متزامن:
💡 استخدم fetch API مع نمط async/await.
الوحدات (ES6):
export const name = value - تصدير مسمىexport default function - تصدير افتراضيimport { name } from "./module" - استيراد مسمىimport Name from "./module" - استيراد افتراضيAsync/Await والوعود:
async function - تعلن عن دالة غير متزامنةawait - ينتظر حل الوعيدnew Promise() - ينشئ وعيدًاPromise.all() - ينتظر جميع الوعودPromise.race() - أسرع واحد يحل يفوز.then()/.catch() - تسلسل الوعود