JavaScript غير المتزامن: المؤقّتات وPromise وfetch

طريقان إلى نفس الفكرة

قبل أن تبدأ

الفكرة الجوهرية

1لماذا «غير متزامن»؟ حلقة الأحداث

JavaScript ينفّذ سطرًا واحدًا في كل لحظة. لو كان كل انتظار يوقف كل شيء، لتجمّدت الصفحة ثانيتين في كل طلب للخادم. الحل: المهام البطيئة تُسلَّم للمتصفح (أو Node) ليتابعها، والكود يكمل. حين تنتهي، تدخل في طابور، وحلقة الأحداث تنفّذها حين يفرغ الكود الحالي.

setTimeout(fn, ms) أبسط مثال: «نادِ هذه الدالة بعد كذا مللي ثانية». شغّل المثال وتوقّع الترتيب قبل أن ترى الناتج:

console.log("1. take the order");

setTimeout(() => {
  console.log("4. coffee ready (after 300 ms)");
}, 300);

setTimeout(() => {
  console.log("3. receipt printed (after 0 ms, but still waits its turn)");
}, 0);

console.log("2. serve the next customer");

السطر 3 جاء بعد 2 رغم أن مؤقّته صفر! لأن أي مؤقّت ينتظر حتى ينتهي الكود الحالي كله، ثم تأخذه حلقة الأحداث من الطابور. هذه الفكرة وحدها تفسّر نصف ألغاز JavaScript.

2Promise: وعد بقيمة لاحقًا

الـ Promise كائن يمثّل نتيجة لم تصل بعد. له ثلاث حالات: قيد الانتظار (pending)، ثم إما تحقّق (fulfilled) بقيمة، أو رُفض (rejected) بخطأ. تكتب ماذا تفعل حين يتحقّق بـ .then(fn)، وحين يُرفض بـ .catch(fn)، وفي الحالتين بـ .finally(fn).

function brew(drink) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (drink === "tea") reject(new Error("we only serve coffee"));
      else resolve(`your ${drink} is ready`);
    }, 200);
  });
}

console.log("ordered, waiting...");

brew("latte")
  .then((msg) => console.log("OK:", msg))
  .catch((err) => console.log("FAILED:", err.message))
  .finally(() => console.log("buzzer returned"));

brew("tea")
  .then((msg) => console.log("OK:", msg))
  .catch((err) => console.log("FAILED:", err.message));

3async وawait: كود غير متزامن يُقرأ كالعادي

سلاسل .then تصير صعبة القراءة حين تطول. الحل الحديث: اكتب async قبل الدالة، ثم await قبل أي Promise: «انتظر هنا حتى يصل الرد، ثم أكمل». الدالة تتوقف مؤقتًا، لكن الصفحة لا تتوقف. ومعالجة الخطأ بـ try { ... } catch (err) { ... } كأي كود عادي.

const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

// a pretend server: answers after a short delay
async function getMenu() {
  await wait(150);
  return [{ name: "latte", price: 14 }, { name: "v60", price: 18 }];
}
async function getStock(name) {
  await wait(100);
  if (name === "v60") throw new Error("v60 beans are out of stock");
  return 12;
}

async function showMenu() {
  try {
    const menu = await getMenu();
    console.log("menu:", menu.map((d) => d.name).join(", "));
    for (const drink of menu) {
      const stock = await getStock(drink.name);
      console.log(drink.name, "stock:", stock);
    }
  } catch (err) {
    console.log("could not finish:", err.message);
  } finally {
    console.log("done loading");
  }
}

showMenu();
console.log("the page is still responsive while we wait");

4fetch: اطلب بيانات من الخادم

fetch(url) يرسل طلب HTTP ويعيد Promise برد (Response). بعدها await res.json() يقرأ الجسم ويحوّله من JSON لكائن. انتبه: fetch يعتبر 404 و500 «نجاحًا» لأن الخادم ردّ، لذلك افحص res.ok بنفسك. ولإرسال بيانات استخدم method: "POST" وbody بـ JSON.

// GET: read data
async function loadMenu() {
  const res = await fetch("https://api.example.com/menu");
  if (!res.ok) throw new Error(`server said ${res.status}`);
  return res.json();
}

// POST: send data
async function placeOrder(order) {
  const res = await fetch("https://api.example.com/orders", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(order),
  });
  if (!res.ok) throw new Error(`order failed: ${res.status}`);
  return res.json();       // e.g. { id: 42, status: "received" }
}

في الملعب التالي نجلب بيانات حقيقية بـ fetch داخل المتصفح. حتى يعمل بلا إنترنت، يطلب «رابط بيانات» (data URL) فيه JSON بدل خادم. في مشروعك تضع رابط الـ API الحقيقي مكانه والكود نفسه لا يتغيّر:

5حالات الواجهة: تحميل وخطأ وفراغ ونجاح

كل شاشة تجلب بيانات لها أربع حالات يجب أن تصمّمها كلها، لا حالة النجاح فقط: التحميل (أظهر مؤشّرًا وعطّل الزر حتى لا يُضغط مرتين)، الخطأ (رسالة مفهومة وزر «حاول مجددًا»)، الفراغ (لا نتائج: قل ذلك بوضوح)، والنجاح. المستخدم الذي يرى شاشة بيضاء لا يعرف هل ينتظر أم يغادر.

6عدة طلبات معًا: Promise.all

إن احتجت ثلاثة أشياء مستقلة (القائمة، العروض، الفروع)، فانتظارها واحدًا بعد الآخر يجمع أوقاتها. Promise.all([...]) يبدؤها كلها معًا وينتظرها، فالوقت الكلي يصير وقت أبطئها فقط. وإن فشل واحد فشل الكل، فإن أردت نتيجة كل واحد مهما حدث استخدم Promise.allSettled.

const wait = (ms, value) => new Promise((r) => setTimeout(() => r(value), ms));
const getMenu = () => wait(300, ["latte", "mocha"]);
const getOffers = () => wait(200, ["2 for 1 on Fridays"]);
const getBranches = () => wait(200, ["Olaya", "Malqa"]);

async function oneByOne() {
  const t = Date.now();
  await getMenu(); await getOffers(); await getBranches();
  return Date.now() - t;
}
async function allTogether() {
  const t = Date.now();
  const [menu, offers, branches] = await Promise.all([getMenu(), getOffers(), getBranches()]);
  console.log(menu.length, "drinks,", offers.length, "offer,", branches.length, "branches");
  return Date.now() - t;
}

(async () => {
  const slow = await oneByOne();
  const fast = await allTogether();
  console.log("one by one ~", Math.round(slow / 100) * 100, "ms");
  console.log("together   ~", Math.round(fast / 100) * 100, "ms");
})();

مثال محلول

المسألة: صفحة طلب قهوة تجلب القائمة، والمستخدم يختار ويضغط «اطلب» فيُرسل الطلب، مع تعطيل الزر أثناء الإرسال ورسالة نجاح برقم الطلب أو رسالة خطأ. الحل: دالتان async لكل طلب، وحالة واحدة تُرسم منها الواجهة. الخادم هنا مُحاكى بـ wait حتى يعمل المثال بلا إنترنت:

خرافة مقابل حقيقة

أين تقابله في العمل

اختبر فهمك

بطاقات مراجعة سريعة

تحقق من فهمك