Skip to main content

۱۰. برنامه‌نویسی ناهمگام

برنامه‌نویسی ناهمگام مثل یه پیشخدمت کارکشته است! 🤵‍♂️. وقتی تو کافه همزمان سفارش میگیری، قهوه درست میکنی و پول رو حساب میکنی بدن اینکه مشتری منتظر بمونه ☕️💨 توی کد هم همینطوره: کارها رو همزمان و بدون قفل کردن برنامه انجام میدی! 🚀

🔄 ۱. Callback ها​

📌 معرفی مفهوم Callback​

در جاوااسکریپت، توابع شیء اولیه هستند و می‌توانیم آن‌ها را به عنوان آرگومان به توابع دیگر پاس دهیم. به این توابع Callback می‌گوییم.

function greet(name, callback) {
    console.log(`سلام ${name}!`);
    callback(); // تابع callback اجرا می‌شود
}

function sayGoodbye() {
    console.log("خداحافظ!");
}

greet("علی", sayGoodbye);
// خروجی:
// سلام علی!
// خداحافظ!

⚠️ مشکل Callback Hell​

وقتی چندین عملیات ناهمگام به صورت زنجیره‌ای اجرا شوند، کد به شکل هرم تو در تو درمی‌آید که به آن Callback Hell می‌گویند.

getData(function(data1) {
    processData(data1, function(data2) {
        saveData(data2, function(data3) {
            console.log("تمام شد!");
        });
    });
});

مشکل: خوانایی کم و نگهداری سخت.

🤝 ۲. Promises​

📌 معرفی Promise​

Promise یک شیء است که نشان‌دهنده موفقیت یا شکست یک عملیات ناهمگام است.

🔹 وضعیت‌های Promise​

  • Pending (در حال انتظار)
  • Fulfilled (موفقیت‌آمیز)
  • Rejected (ناموفق)

🔹 ساخت Promise​

const myPromise = new Promise((resolve, reject) => {
    const success = true;
    if (success) {
        resolve("عملیات موفق بود! ✅");
    } else {
        reject("خطا رخ داد! ❌");
    }
});

myPromise
    .then(result => console.log(result)) // در صورت موفقیت
    .catch(error => console.log(error)); // در صورت خطا

🔹 زنجیره‌ای کردن Promises​

fetchData()
    .then(processData)
    .then(saveData)
    .then(() => console.log("تمام شد!"))
    .catch(error => console.log("خطا:", error));

⏳ ۳. Async/Await​

📌 معرفی Async/Await​

این روش برای ساده‌سازی کدهای ناهمگام است و کدی شبیه به همگام می‌نویسیم.

🔹 ساختار اصلی​

async function fetchData() {
    try {
        const data = await someAsyncFunction(); // منتظر می‌ماند تا Promise حل شود
        console.log(data);
    } catch (error) {
        console.log("خطا:", error);
    }
}

🔹 مثال کاربردی با API​

async function getUserData() {
    try {
        const response = await fetch('https://api.example.com/users');
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.log("خطا در دریافت داده:", error);
    }
}

getUserData();

🌐 ۴. Fetch API​

📌 ارسال و دریافت درخواست‌های HTTP​

Fetch API یک روش مدرن برای کار با درخواست‌های شبکه است.

🔹 دریافت داده (GET)​

fetch('https://jsonplaceholder.typicode.com/posts')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.log("خطا:", error));

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

fetch('https://jsonplaceholder.typicode.com/posts', {
    method: 'POST',
    body: JSON.stringify({
        title: 'عنوان پست',
        body: 'متن پست',
        userId: 1
    }),
    headers: {
        'Content-type': 'application/json; charset=UTF-8',
    },
})
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.log("خطا:", error));

۵. 🎯 جمع‌بندی​

  • Callbackها ساده‌اند اما منجر به Callback Hell می‌شوند.
  • Promises مدیریت آسان‌تر و خوانایی بهتری دارند.
  • Async/Await کد را شبیه به همگام می‌کند و خوانایی را افزایش می‌دهد.
  • Fetch API برای کار با درخواست‌های HTTP استفاده می‌شود.

حالا شما می‌توانید کدهای ناهمگام را به راحتی بنویسید! 🚀

با آرزوی موفقیت
تیم برندآرا 🤖