JavaScript Magic Magic: Callbacks ، Promises و Async/Await

سلام ، خواننده عالی! 🚀 اگر تا به حال توسط دنیای ناهمزمان جاوا اسکریپت احساس سردرگمی کرده اید ، نگران نباشید – شما تنها نیستید! امروز ، من قصد دارم شما را طی کنم تماس های برگشتی ، وعده ها ، و async/در انتظار به ساده ترین روش ممکن. در پایان این پست ، شما نه تنها آنها را درک خواهید کرد بلکه آنها را نیز درک خواهید کرد عاشق جادوی Async JavaScript شویدبشر ✨

🌱 مشکل: JavaScript تک رشته ای است

JavaScript کد را اجرا می کند خط به خط (همزمان) ، اما گاهی اوقات ، ما باید کارهای وقت گیر مانند واکشی داده ها از سرور را انجام دهیم. اگر JavaScript منتظر بود تا هر کار قبل از حرکت به پایان برسد ، برنامه های ما این کار را می کردند مسدود کردن! 😱 به همین دلیل ما نیاز داریم برنامه نویسی ناهمزمانبشر

🔄 تماس های برگشتی: راه مدرسه قدیمی

بوها بازپرداخت تابعی است که به عنوان یک آرگومان به یک عملکرد دیگر منتقل می شود و بعداً اجرا می شود. این اولین رویکرد برای انجام عملیات Async در JavaScript بود.

مثال:

function fetchData(callback) {
    console.log("Fetching data... ⏳");
    setTimeout(() => {
        callback("Data fetched! ✅");
    }, 2000);
}

fetchData((message) => {
    console.log(message);
});

🔹 مشکلی در تماس تلفنی وجود دارد؟ جهنم تماس تلفنی! 😵‍💫 وقتی چندین تماس برگشتی تو در تو داریم ، کد کثیف و غیرقابل خواندن می شود.

fetchData((message1) => {
    console.log(message1);
    fetchData((message2) => {
        console.log(message2);
        fetchData((message3) => {
            console.log(message3);
        });
    });
});

به این گفته می شود جهنم تماس تلفنی 🕳 ، و این یک کابوس برای نگهداری است.

🔥 وعده ها: یک راه بهتر

بوها وعده شیئی است که یک مقدار آینده را نشان می دهد. این می تواند در یکی از سه ایالت باشد:

• درنده ⏳ (هنوز منتظر نتیجه)
• حل شده/تحقق یافته ✅ (موفقیت!)
• رد شده ❌ (چیزی اشتباه پیش آمد)

مثال:

function fetchData() {
    return new Promise((resolve, reject) => {
        console.log("Fetching data... ⏳");
        setTimeout(() => {
            resolve("Data fetched! ✅");
        }, 2000);
    });
}

fetchData().then((message) => {
    console.log(message);
}).catch((error) => {
    console.error(error);
});

🔹 چرا وعده می دهد؟ دیگر هیچ جهنمی برگشت ناپذیر نیست! ما می توانیم چندین زنجیر کنیم .then() به جای توابع لانه سازی فراخوانی می شود.

fetchData()
    .then((message) => {
        console.log(message);
        return fetchData();
    })
    .then((message) => {
        console.log(message);
        return fetchData();
    })
    .then((message) => {
        console.log(message);
    })
    .catch((error) => {
        console.error(error);
    });

بسیار تمیزتر! اما صبر کنید … وجود دارد حتی بهتر راه 😍

🚀 async/منتظر: قهرمانی که ما سزاوار آن هستیم

async/در انتظار است قند نحوی بیش از وعده ها ، ساختن کد ناهمزمان مانند کد همزمان به نظر می رسد. JavaScript را زیبا می کند. 😍

مثال:

async function fetchDataAsync() {
    console.log("Fetching data... ⏳");
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve("Data fetched! ✅");
        }, 2000);
    });
}

async function loadData() {
    try {
        const message1 = await fetchDataAsync();
        console.log(message1);

        const message2 = await fetchDataAsync();
        console.log(message2);

        const message3 = await fetchDataAsync();
        console.log(message3);
    } catch (error) {
        console.error(error);
    }
}

loadData();

🔹 چرا async/منتظر؟

• همزمان به نظر می رسد، اما هنوز هم async است
• بدون جهنم تماس تلفنی
• رسیدگی به خطای آسان تر با امتحان/گرفتن

🎯 خلاصه: چه موقع از چه چیزی استفاده کنیم؟

👉 استفاده کنید async/در انتظار هر زمان ممکن – این مدرن و تمیزترین راه است!

thoughts افکار نهایی

شما آن را تا آخر ساخته اید! 🎉 اکنون ، شما می دانید که چگونه JavaScript عملیات Async را مانند یک حرفه ای انجام می دهد. امیدوارم که این راهنما را مفید و آسان برای درک پیدا کنید. اگر این کار را کردید ، عشق به من نشان دهید:

بیایید کد نویسی را ادامه دهیم و وب را با هم عالی کنیم! 🚀🔥

برنامه نویسی مبارک! 💻✨