شرح Async و Await في JavaScript بأمثلة عملية

getUser(1, (err, user) => {
  if (err) return handleError(err);
  getPosts(user.id, (err, posts) => {
    if (err) return handleError(err);
    getComments(posts[0].id, (err, comments) => {
      // هذا يُسمّى "callback hell" 😱
    });
  });
});

getUser(1)
  .then((user) => getPosts(user.id))
  .then((posts) => getComments(posts[0].id))
  .then((comments) => console.log(comments))
  .catch(handleError);

async function loadData() {
  try {
    const user = await getUser(1);
    const posts = await getPosts(user.id);
    const comments = await getComments(posts[0].id);
    console.log(comments);
  } catch (err) {
    handleError(err);
  }
}

async function fetchUser(id) {
  const response = await fetch(`https://api.example.com/users/${id}`);

  if (!response.ok) {
    throw new Error(`خطأ ${response.status}`);
  }

  const user = await response.json();
  return user;
}

// الاستخدام
fetchUser(1)
  .then(user => console.log(user))
  .catch(err => console.error(err));

// أو بداخل async أخرى
async function main() {
  try {
    const user = await fetchUser(1);
    console.log(user);
  } catch (err) {
    console.error("فشل:", err.message);
  }
}

main();

// ❌ بطيء (3 طلبات متسلسلة)
async function loadAllSlow() {
  const users = await fetch("/api/users").then(r => r.json());
  const posts = await fetch("/api/posts").then(r => r.json());
  const tags = await fetch("/api/tags").then(r => r.json());
  return { users, posts, tags };
}

// ✅ سريع (3 طلبات متوازية)
async function loadAllFast() {
  const [users, posts, tags] = await Promise.all([
    fetch("/api/users").then(r => r.json()),
    fetch("/api/posts").then(r => r.json()),
    fetch("/api/tags").then(r => r.json()),
  ]);
  return { users, posts, tags };
}

async function safeFetch(url) {
  try {
    const res = await fetch(url);
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    return await res.json();
  } catch (err) {
    console.error("خطأ:", err.message);
    return null; // أو أعد رمي الخطأ إن أردت
  }
}

try {
  const [a, b] = await Promise.all([fetchA(), fetchB()]);
} catch (err) {
  // فشل A أو B أو كلاهما
}

const results = await Promise.allSettled([fetchA(), fetchB()]);
results.forEach((r, i) => {
  if (r.status === "fulfilled") {
    console.log(`#${i}: نجح`, r.value);
  } else {
    console.log(`#${i}: فشل`, r.reason);
  }
});

async function login(email, password) {
  try {
    // 1. إرسال بيانات تسجيل الدخول
    const res = await fetch("/api/login", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ email, password }),
    });

    if (!res.ok) {
      if (res.status === 401) throw new Error("بيانات خاطئة");
      throw new Error("خطأ في الخادم");
    }

    const { token } = await res.json();

    // 2. حفظ التوكن
    localStorage.setItem("token", token);

    // 3. جلب بيانات المستخدم
    const userRes = await fetch("/api/me", {
      headers: { Authorization: `Bearer ${token}` },
    });
    const user = await userRes.json();

    return user;
  } catch (err) {
    console.error("فشل تسجيل الدخول:", err.message);
    throw err;
  }
}

// الاستخدام في نموذج
document.getElementById("login-form").addEventListener("submit", async (e) => {
  e.preventDefault();
  const form = e.target;
  try {
    const user = await login(form.email.value, form.password.value);
    alert(`أهلاً ${user.name}`);
  } catch (err) {
    alert(err.message);
  }
});

// ❌ data هنا Promise، ليس القيمة الفعلية
async function broken() {
  const data = fetch("/api/x").then(r => r.json());
  console.log(data); // Promise {...}
}

// ✅
async function fixed() {
  const data = await fetch("/api/x").then(r => r.json());
  console.log(data); // القيمة الحقيقية
}

// خطأ
function bad() {
  const x = await fetch("/api"); // SyntaxError
}

// صحيح
async function good() {
  const x = await fetch("/api");
}

// ❌ لا يعمل كما تتوقّع
items.forEach(async (item) => {
  await process(item); // forEach لا ينتظر
});
console.log("انتهى"); // يُطبع قبل انتهاء العمليات

// ✅ استخدم for...of
for (const item of items) {
  await process(item);
}
console.log("انتهى فعلاً");