{"id":"l-js-4-5","courseId":"javascript-fundamentals","lang":"ar","kind":"lesson","summary":"تشرح لماذا تنتظر JavaScript دون أن تتجمّد، وتقرأ وتكتب كودًا مبنيًا على الـ promises باستخدام then وasync/await، وتستدعي fetch مع معالجة سليمة للأخطاء، وتتوقّع ترتيب المخرجات اعتمادًا على حلقة الأحداث (event loop).","html":"

سيكون Pocket أنفع لو استطاع أن يعرض إنفاقك باليورو أيضًا، وهذا يعني أن يطلب من خادم أسعار صرف اليوم. قد يستغرق هذا الطلب 50 ميلي ثانية أو خمس ثوانٍ. ولو توقّفت JavaScript ببساطة وانتظرت، لتجمّدت الصفحة كلها: لا تمرير، ولا كتابة، ولا نقرات. ولأن كودك يتشارك خيطًا (thread) واحدًا مع الصفحة نفسها، فهو يحتاج إلى طريقة يبدأ بها العمل البطيء، ويواصل، ثم يلتقط النتيجة لاحقًا. وهذا هو الكود غير المتزامن (asynchronous).

\n

الـ Callbacks: “اتصل بي حين تنتهي”

\n

أقدم أشكال “لاحقًا” هو الـ callback. تطلب setTimeout من المتصفّح أن يستدعي دالة بعد مهلة:

\n
JavaScript
console.log(\"Requesting rates…\");\nsetTimeout(() => {\n  console.log(\"Rates arrived\");\n}, 100);\nconsole.log(\"Still responsive\");
\n

يُطبع “Still responsive” قبل “Rates arrived”. setTimeout لا توقف شيئًا؛ إنها تسلّم الدالة إلى المتصفّح وتعود فورًا. الـ callbacks تعمل، لكن حين تحتاج الخطوة الثانية إلى نتيجة الأولى، والثالثة إلى نتيجة الثانية، فإنها تتداخل أعمق فأعمق، ويجب تكرار معالجة الأخطاء في كل مستوى. وقد أُضيفت الـ promises لإصلاح ذلك.

\n

الـ Promises: قيمة تصل لاحقًا

\n

الـ promise (الوعد) كائن يمثّل نتيجة ليست جاهزة بعد. يبدأ معلّقًا (pending)، ويستقرّ مرة واحدة بالضبط: إمّا مُنجَزًا (fulfilled) بقيمة، أو مرفوضًا (rejected) بخطأ. وتُلحق ما يجب أن يحدث بعد ذلك باستخدام .then (عند النجاح) و.catch (عند الفشل).

\n

البيئة المعزولة لهذه الدورة لا شبكة فيها، لذلك تستخدم الأمثلة fakeFetch، وهي بديل يتصرّف مثل fetch الحقيقية: تُرجع promise لكائن استجابة فيه ok وstatus ودالة json().

\n
JavaScript
function fakeFetch(url) {\n  return new Promise((resolve) => {\n    setTimeout(() => {\n      if (url === \"/api/rates\") {\n        resolve({ ok: true, status: 200, json: async () => ({ EUR: 0.86, GBP: 0.75 }) });\n      } else {\n        resolve({ ok: false, status: 404, json: async () => ({ error: \"Not found\" }) });\n      }\n    }, 50);\n  });\n}\n\nfakeFetch(\"/api/rates\")\n  .then((response) => response.json())\n  .then((rates) => console.log(\"EUR rate:\", rates.EUR))\n  .catch((error) => console.log(\"Failed:\", error.message));
\n

كل .then تُرجع promise جديدًا، لذلك تتسلسل الخطوات في خط مسطّح بدلًا من أن تتداخل، و.catch واحدة في النهاية تتعامل مع الفشل في أي خطوة. نادرًا ما ستُنشئ promises بنفسك باستخدام new Promise؛ فالمكتبات وواجهات المتصفّح البرمجية تسلّمها إليك، ومهمتك أن تستهلكها.

\n

async وawait: promises تُقرأ مثل الكود العادي

\n

async/await طريقة أوضح لكتابة الشيء نفسه. داخل دالة موسومة بـ async، توقف await promise تلك الدالة مؤقتًا حتى يستقرّ الـ promise، ثم تعطيك قيمته. وتصبح الأخطاء استثناءات عادية تلتقطها بـ try/catch:

\n
JavaScript
function fakeFetch(url) {\n  return new Promise((resolve) => {\n    setTimeout(() => {\n      const ok = url === \"/api/rates\";\n      const body = ok ? { EUR: 0.86 } : { error: \"Not found\" };\n      resolve({ ok, status: ok ? 200 : 404, json: async () => body });\n    }, 50);\n  });\n}\n\nasync function getJson(url) {\n  const response = await fakeFetch(url);\n  if (!response.ok) {\n    throw new Error(`HTTP ${response.status} for ${url}`);\n  }\n  return response.json();\n}\n\nasync function showRates() {\n  try {\n    const rates = await getJson(\"/api/rates\");\n    console.log(\"EUR:\", rates.EUR);\n    await getJson(\"/api/missing\");\n  } catch (error) {\n    console.log(\"Could not load:\", error.message);\n  }\n}\n\nshowRates();
\n

لاحظ ما لا تفعله await: إنها لا تجمّد الصفحة. فبينما تنتظر showRates، يواصل المتصفّح التعامل مع النقرات ورسم الإطارات. هذه الدالة وحدها هي المتوقّفة مؤقتًا.

\n

الدالة async تُرجع دائمًا promise، حتى حين تُرجع بـ return قيمة عادية. لذلك يجب على من يستدعيها أن يستخدم await أيضًا، أو .then.

\n\n

fetch الحقيقية

\n

في صفحة حقيقية، تستبدل fakeFetch بـ fetch الخاصة بالمتصفّح، ويبقى شكل الكود كما هو:

\n
rates.js
async function getJson(url) {\n  const response = await fetch(url);\n  if (!response.ok) {\n    throw new Error(`HTTP ${response.status} for ${url}`);\n  }\n  return response.json();\n}
\n

فحص response.ok ضروري، وكثير من الشروحات تُغفله. fetch لا تُرفض إلا حين يتعذّر حدوث الطلب أصلًا، مثلًا حين يكون المستخدم غير متّصل. أما الـ 404 أو الـ 500 فاستجابة HTTP سليمة تمامًا، لذلك يُنجَز الـ promise، وok تساوي false. ودون هذا الفحص، سيحاول كودك قراءة أسعار الصرف من صفحة خطأ.

\n

وحين لا يعتمد طلبان أحدهما على الآخر، ابدأهما معًا وانتظر مرة واحدة باستخدام Promise.all (داخل دالة async، كأي await)، التي تُنجَز بمصفوفة من النتائج، أو تُرفض بمجرّد أن يفشل أيّ منهما:

\n
rates.js
const [rates, categories] = await Promise.all([\n  getJson(\"/api/rates\"),\n  getJson(\"/api/categories\"),\n]);
\n

حلقة الأحداث

\n

كيف يستطيع خيط واحد فعل كل هذا؟ ينفّذ المحرّك كودك على مكدّس الاستدعاءات (call stack)، دالة واحدة في كل مرة. أما الأشياء البطيئة، مثل المؤقّتات وطلبات الشبكة، فيتولّاها المتصفّح خارج المكدّس. وحين ينتهي أحدها، يوضع الـ callback الخاص به في طابور. وكلما فرغ المكدّس، تأخذ حلقة الأحداث (event loop) الـ callback التالي من طابور وتنفّذه.

\n
\n يُنفَّذ كودك على مكدّس الاستدعاءات. يتولّى المتصفّح المؤقّتات وfetch، ويضع الـ callbacks المنتهية في طوابير. callbacks الـ promises تذهب إلى طابور المهام الدقيقة، والمؤقّتات والأحداث إلى طابور المهام. وحين يفرغ المكدّس، تنفّذ حلقة الأحداث أولًا كل المهام الدقيقة، ثم مهمة واحدة.\n \n مكدّس الاستدعاءات\n \n showRates()\n \n main script\n \n المتصفّح\n المؤقّتات، fetch\n \n المهام الدقيقة\n callbacks الـ promises\n \n المهام\n المؤقّتات، النقرات\n \n \n \n \n \n 1. كل المهام الدقيقة\n 2. ثم مهمة واحدة\n
حلقة الأحداث تنفّذ الـ callbacks المنتظرة حين يفرغ المكدّس
\n

هناك طابوران، والترتيب بينهما يفسّر ألغازًا كثيرة. callbacks الـ promises تذهب إلى طابور المهام الدقيقة (microtask queue)؛ والمؤقّتات والأحداث تذهب إلى طابور المهام (task queue). وفي كل مرة يفرغ فيها المكدّس، تنفّذ الحلقة أولًا كل مهمة دقيقة منتظرة، ثم مهمة واحدة، ثم تفحص المهام الدقيقة من جديد:

\n
JavaScript
console.log(\"1: script\");\nsetTimeout(() => console.log(\"4: timeout task\"), 0);\nPromise.resolve().then(() => console.log(\"3: promise microtask\"));\nconsole.log(\"2: script\");
\n

مهلة 0 ميلي ثانية لا تعني “الآن”؛ بل تعني “على شكل مهمة، بمجرّد أن يفرغ المكدّس وتنتهي المهام الدقيقة”. والنموذج نفسه يفسّر لماذا تجمّد حلقة تكرار طويلة الصفحة: فما دام كودك يشغل المكدّس، لا يستطيع أي معالج نقرات أو مؤقّت أو إعادة رسم أن يُنفَّذ.

\n\n

اكتمل القسم 4: يعيش Pocket في صفحة، ويتفاعل مع النقرات، ويستقبل المدخلات، ويحفظ البيانات، ويستطيع التحدّث إلى خادم. ويحوّل القسم 5 هذه الكومة المتنامية من الكود إلى برنامج منظّم جيدًا.

\n","toc":[{"id":"sec-1","text":"الـ Callbacks: “اتصل بي حين تنتهي”","level":2},{"id":"sec-2","text":"الـ Promises: قيمة تصل لاحقًا","level":2},{"id":"sec-3","text":"async وawait: promises تُقرأ مثل الكود العادي","level":2},{"id":"sec-4","text":"fetch الحقيقية","level":2},{"id":"sec-5","text":"حلقة الأحداث","level":2}],"takeaways":["تنفّذ JavaScript شيئًا واحدًا في كل مرة؛ أما العمل البطيء مثل طلبات الشبكة والمؤقّتات فيجري خارج كودك، ثم يُستدعى كودك راجعًا حين ينتهي.","الـ promise كائن يمثّل قيمة ستصل لاحقًا؛ وينتهي إمّا مُنجَزًا (fulfilled) بقيمة أو مرفوضًا (rejected) بخطأ.","await توقف مؤقتًا الدالة async المحيطة بها فقط حتى يستقرّ الـ promise؛ ضع الـ awaits داخل try/catch للتعامل مع حالات الرفض.","fetch لا تُرفض إلا حين تفشل الشبكة؛ أما مع أخطاء HTTP مثل 404 فتُنجَز وresponse.ok تساوي false، لذلك افحصها دائمًا.","بعد كل قطعة كود متزامن، تنفّذ حلقة الأحداث كل callbacks الـ promises المنتظرة قبل المؤقّت أو الحدث التالي."],"further":[{"title":"Using promises (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises"},{"title":"async function (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function"},{"title":"Using the Fetch API (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch"},{"title":"The event loop (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Execution_model"}],"quiz":[{"q":"

بأي ترتيب تُطبع الأسطر؟

\n
JavaScript
console.log(\"A\");\nsetTimeout(() => console.log(\"B\"), 0);\nPromise.resolve().then(() => console.log(\"C\"));\nconsole.log(\"D\");
\n","options":[{"text":"A، B، C، D","why":"هذا ترتيب كتابة الأسطر، لكن B وC دالتا callback تُنفَّذان لاحقًا، بعد كل الكود المتزامن."},{"text":"A، D، B، C","why":"كلتا الدالتين تنتظران الكود المتزامن، لكن callbacks الـ promises (المهام الدقيقة) تُنفَّذ قبل callbacks المؤقّتات."},{"text":"A، D، C، B","why":"صحيح. A وD تُنفَّذان الآن. ثم يُفرَّغ طابور المهام الدقيقة ©، وبعدها فقط تُنفَّذ مهمة المؤقّت (B)، حتى مع تأخير 0 ميلي ثانية."}],"answer":2},{"q":"

const data = getRates(); console.log(data.EUR); حيث getRates دالة async. ماذا يُطبع؟

","options":[{"text":"سعر صرف EUR، لأن دوال async تُرجع قيمتها مباشرة.","why":"دالة async تُرجع دائمًا promise. ودون await، تكون data ذلك الـ promise، لا الأسعار."},{"text":"undefined، لأن data هي promise معلّق، وليست له خاصية EUR.","why":"صحيح. اكتب const data = await getRates(); داخل دالة async، أو استخدم .then."},{"text":"يرمي خطأ، لأنه لا يمكنك استدعاء دالة async دون await.","why":"يمكنك استدعاؤها؛ لكنك ستستعيد promise فقط. ونسيان await يفشل بصمت، ولهذا هو خطأ شائع."}],"answer":1},{"q":"

يُرجع خادمك 404 Not Found للطلب fetch("/api/rates"). ماذا يفعل الـ promise الخاص بـ fetch؟

","options":[{"text":"يُنجَز باستجابة قيمة ok فيها false وstatus فيها 404.","why":"صحيح. أخطاء HTTP ما زالت رحلات شبكة ناجحة ذهابًا وإيابًا. عليك أن تفحص response.ok بنفسك وترمي خطأ إن أردت الرفض."},{"text":"يُرفض، فتُنفَّذ كتلة catch لديك.","why":"fetch لا تُرفض إلا مع أعطال على مستوى الشبكة مثل انقطاع الاتصال. والـ 404 استجابة HTTP صالحة."},{"text":"لا يستقرّ أبدًا، فيظل كودك ينتظر إلى الأبد.","why":"الخادم أجاب، فيستقرّ الـ promise. إنه يُنجَز باستجابة الـ 404."}],"answer":0},{"q":"

تحتاج إلى أسعار الصرف وقائمة الفئات، من رابطين مستقلّين، قبل العرض. أيّها الأسرع؟

","options":[{"text":"const r = await getRates(); const c = await getCategories();","why":"هذا يعمل، لكن الطلب الثاني لا يبدأ إلا بعد انتهاء الأول، فتنتظر الاثنين واحدًا بعد الآخر."},{"text":"const [r, c] = await Promise.all([getRates(), getCategories()]);","why":"صحيح. يبدأ الطلبان فورًا وتنتظر مرة واحدة، للأبطأ منهما."},{"text":"const r = getRates(); const c = getCategories(); دون await.","why":"يبدأ الاثنان بالتوازي، لكن r وc promises لا بيانات، فيفشل العرض باستخدامهما."}],"answer":1}],"exercise":{"kind":"web","mode":"js","starter":{"js":"// A stand-in for fetch: the sandbox has no network. It returns a promise\n// of a response with ok, status and json(), after a short delay.\nfunction fakeFetch(url) {\n const routes = {\n \"/api/rates\": { EUR: 0.86, GBP: 0.75 },\n \"/api/categories\": [{ name: \"food\" }, { name: \"travel\" }, { name: \"fun\" }],\n };\n return new Promise((resolve) => {\n setTimeout(() => {\n const ok = url in routes;\n const body = ok ? routes[url] : { error: \"Not found\" };\n resolve({ ok, status: ok ? 200 : 404, json: async () => body });\n }, 30);\n });\n}\n\n// Return the parsed JSON body, or throw an Error mentioning the status\nasync function getJson(url) {\n const response = fakeFetch(url);\n return response.json();\n}\n\n// [\"food\", \"travel\", \"fun\"], from /api/categories\nasync function loadCategoryNames() {\n const categories = getJson(\"/api/categories\");\n return categories.map((c) => c.name);\n}\n\n// The amount converted to euro cents (rounded), using /api/rates\nasync function toEuroCents(cents) {\n}\n\n// The JSON from url, or `fallback` if anything goes wrong\nasync function safeGetJson(url, fallback) {\n return getJson(url);\n}\n"},"solution":{"js":"// A stand-in for fetch: the sandbox has no network. It returns a promise\n// of a response with ok, status and json(), after a short delay.\nfunction fakeFetch(url) {\n const routes = {\n \"/api/rates\": { EUR: 0.86, GBP: 0.75 },\n \"/api/categories\": [{ name: \"food\" }, { name: \"travel\" }, { name: \"fun\" }],\n };\n return new Promise((resolve) => {\n setTimeout(() => {\n const ok = url in routes;\n const body = ok ? routes[url] : { error: \"Not found\" };\n resolve({ ok, status: ok ? 200 : 404, json: async () => body });\n }, 30);\n });\n}\n\nasync function getJson(url) {\n const response = await fakeFetch(url);\n if (!response.ok) {\n throw new Error(`HTTP ${response.status} for ${url}`);\n }\n return response.json();\n}\n\nasync function loadCategoryNames() {\n const categories = await getJson(\"/api/categories\");\n return categories.map((c) => c.name);\n}\n\nasync function toEuroCents(cents) {\n const rates = await getJson(\"/api/rates\");\n return Math.round(cents * rates.EUR);\n}\n\nasync function safeGetJson(url, fallback) {\n try {\n return await getJson(url);\n } catch {\n return fallback;\n }\n}\n\nloadCategoryNames().then((names) => console.log(names));\n"},"checks":[{"id":"get-json","test":"const rates = await getJson('/api/rates');\nreturn rates && rates.EUR === 0.86;\n"},{"id":"get-json-error","test":"try { await getJson('/api/missing'); return false; } catch (e) { return e instanceof Error && e.message.includes('404'); }\n"},{"id":"names","test":"const names = await loadCategoryNames();\nreturn Array.isArray(names) && names.join() === 'food,travel,fun';\n"},{"id":"euros","test":"return (await toEuroCents(1000)) === 860 && (await toEuroCents(450)) === 387;\n"},{"id":"safe","test":"const fallback = [];\nconst bad = await safeGetJson('/api/nope', fallback);\nconst good = await safeGetJson('/api/rates', null);\nreturn bad === fallback && good && good.GBP === 0.75;\n"}],"title":"حمّل البيانات بشكل غير متزامن","prompt":"

البيئة المعزولة لا شبكة فيها، لذلك يعطيك كود البداية fakeFetch(url)، التي تتصرّف مثل fetch: تُرجع promise لاستجابة فيها ok وstatus ودالة json() غير متزامنة. اكتب أربع دوال async:

\n\n","hints":["كود البداية ينسى await: fakeFetch(url) تعطي promise، والـ promise ليست له دالة json. اكتب const response = await fakeFetch(url);.","بعد الانتظار، افحص if (!response.ok) { throw new Error(`HTTP ${response.status}`); } قبل إرجاع response.json().","تحتاج safeGetJson إلى try { return await getJson(url); } catch { return fallback; }. والـ await داخل try مهمة: دونها يفلت الرفض من الـ catch."],"explanation":"

كل دالة تنتظر شيئًا هي async وتستخدم await، فيُقرأ الكود من الأعلى إلى الأسفل مع أن كل خطوة تنتهي لاحقًا. تحوّل getJson خطأ HTTP إلى Error مرميّ، لأن fetch (وهذه النسخة المزيّفة) تُنجَز بنجاح مع الـ 404؛ وبعد ذلك لا يحتاج المُستدعون إلا إلى التعامل مع نوع واحد من الفشل. وتقرّب toEuroCents بعد التحويل، محافظةً على قاعدة Pocket في السنتات الصحيحة: 450 × 0.86 تساوي 387.0، و1000 × 0.86 تساوي 860. وفي safeGetJson، فإن return await داخل try مقصودة: فالانتظار هناك يجعل الرفض يُرمى داخل try، حيث تستطيع catch تحويله إلى القيمة البديلة.

\n","checkLabels":{"get-json":"getJson تُرجع الجسم بعد تحليله","get-json-error":"getJson ترمي Error تذكر 404 مع الرابط المفقود","names":"loadCategoryNames تُرجع أسماء الفئات","euros":"toEuroCents تحوّل بسعر EUR وتقرّب","safe":"safeGetJson تُرجع القيمة البديلة حين يفشل التحميل"}},"words":722,"readMinutes":4}