ليه نتيجة الـ API بتطلع undefined؟ async/await للمبتدئ

المستوى المطلوب: مبتدئ

لو ناديت دالة بتجيب بيانات من API، وطبعت النتيجة، ولقيتها undefined أو Promise { <pending> }، المشكلة مش في السيرفر ولا في الـ API. المقال ده هيوريك السبب بالظبط، وإزاي await بيحلها في سطر واحد.

ليه بياناتك بتطلع undefined قبل ما توصل

المشكلة باختصار

جافاسكريبت مبتستناش. لما بتنادي fetch، هي بتبعت الطلب وبتكمّل باقي الكود على طول من غير ما تقف تستنى الرد. فلو حاولت تقرأ البيانات في نفس اللحظة، بتلاقيها لسه ماوصلتش. النتيجة: undefined. ده مش باج، ده سلوك مقصود عشان البرنامج ميتجمّدش وهو مستني الشبكة.

مثال بسيط: القهوة اللي لسه ماوصلتش

تخيّل إنك طلبت قهوة من الكافيه. الباريستا قال لك "تمام، هجهّزها". دي عملية بتاخد وقت. لو انت في نفس الثانية رفعت الكوب وحاولت تشرب، هتلاقيه فاضي، لأن القهوة لسه بتتعمل.

الكلمة await معناها ببساطة: "استنى لحد ما الباريستا يسلّمك الكوب مليان، وبعدها اشرب". من غير await انت بترفع الكوب الفاضي بدري. مع await انت بتستنى القهوة الحقيقية.

المفهوم بدقة: الـ Promise والتنفيذ غير المتزامن

لما بتنادي fetch، هي مبترجّعش البيانات. هي بترجّع فورًا كائن اسمه Promise: وعد بإن البيانات هتوصل في المستقبل. الـ Promise بيبدأ في حالة pending (شغّال)، وبعد ما الرد يوصل بيتحوّل لـ fulfilled (جاهز) ومعاه القيمة.

الكلمة await بتقول للدالة الـ async: "أوقف هنا، متكمّليش، لحد ما الـ Promise ده يتحوّل لـ fulfilled، وبعدها كمّلي وخدي القيمة الحقيقية". فالفرق مش في السرعة، الفرق في متى بتقرأ القيمة.

الكود: الغلط والصح

// الغلط: النتيجة undefined
function getUser() {
  const user = fetch("/api/user").then(r => r.json());
  return user; // ده Promise لسه شغّال، مش البيانات
}
console.log(getUser()); // Promise { <pending> }

// الصح: باستخدام async/await
async function getUser() {
  const res = await fetch("/api/user");
  const user = await res.json();
  return user; // البيانات جاهزة فعلاً
}
getUser().then(u => console.log(u.name)); // "سارة"

ركز في نقطة مهمة: await بيشتغل جوه دالة معرّفة بـ async بس. لو حطيته بره، هيطلعلك خطأ SyntaxError.

سيناريو واقعي بالأرقام

الافتراض إن عندك لوحة تحكم بتخدم 50 ألف طلب في اليوم، وكل طلب للـ API بياخد حوالي 210 مللي ثانية عشان يرجّع. من غير await، الكود بيقرأ المتغيّر عند اللحظة صفر، قبل ما البيانات توصل بـ 210 مللي ثانية كاملة، فبيطبع undefined في كل مرة تقريبًا. مع ، التنفيذ بيقف ويكمّل بعد 210 مللي ثانية لما البيانات تبقى جاهزة فعلاً، فبتاخد القيمة الصح.