پیشرفته · ۱۰ دقیقه مطالعه

Fetch API — گرفتن داده از سرور

با Fetch بدون رفرش صفحه از سرور داده می‌گیری (همان AJAX).

گرفتن داده (GET)

const res = await fetch("/api/courses");
const data = await res.json();

بررسی وضعیت

if (!res.ok) {
    throw new Error("خطای سرور: " + res.status);
}

ارسال داده (POST)

const res = await fetch("/api/flag", {
    method: "POST",
    headers: {
        "Content-Type": "application/json",
        "X-CSRF-TOKEN": token   // در Laravel لازم است
    },
    body: JSON.stringify({ flag: "flag{...}" }),
});

الگوی کامل

async function getCourses() {
    try {
        const res = await fetch("/api/courses");
        if (!res.ok) throw new Error(res.status);
        return await res.json();
    } catch (e) {
        console.error("دریافت نشد:", e);
        return [];
    }
}

در پلی‌گراند، یک درخواست واقعی به API گیت‌هاب می‌زنیم و نتیجه را در کنسول می‌بینیم.

🧪

خودت امتحان کن

اجرا در مرورگرِ خودت — امن

کد را تغییر بده و «اجرا» را بزن. این کد فقط در مرورگر خودت اجرا می‌شود.

برای ثبت پیشرفت و کسب XP وارد شو.

ورود به میدان
→ برنامه‌نویسی ناهمگام: Promise و async/await
ماژول‌ها، خطا و دیباگ ←