درک awiat async و promise و callback

معرفی مفاهیم asynchronous, promises, asyncawait در جاوا اسکریپت

یک سری عملیات توی جاوااسکریپت مثل اتصال به یک منبع خارجی با Ajax یا WebSocket و یا خوندن و نوشتن اطلاعات توی دیتابیس و هارددیسک، جدا از روند اصلی برنامه اجرا میشن. به این عملیات میگن عملیات ناهمگام. یعنی وقتی مفسر به اون قسمت از کد رسید که مثلا داره با یک منبع خارجی ارتباط برقرار می‌کنه، منتظر نتیجه‌ی این قسمت نمی‌مونه و به ادامه روند برنامه می‌پردازه.

جاوا اسکریپت یک زبان تک رشته‌ای است و امکان چندوظیفه‌ای در این زبان وجود ندارد؛ بنابراین وظایف مختلف در این زبان نمی‌توانند به صورت همزمان اجرا شوند و باید از راهکارهای موجود در این زبان برای همگام سازی وظایف استفاده کرد.

1. Callback
2. Promises
3. async/await

حالا راه حل چیه؟ callback ها یکی از راه‌حل‌هایی بودند که جاوا اسکریپت برای یادآوری وظایف در زمان معین استفاده می‌کرد؛ ولی این روش سختی‌های خاص خود را داشت و همیشه درست جواب نمی‌داد.

بعد از مدتی promise ها جای خود  را در این زبان باز کردند و توانستند به شکل منضبط‌تر و هماهنگ‌تری فعالیت‌های همزمان را مدیریت کنند.

حالا اژدها (async await) وارد میشود!

Async await در جاوا اسکریپت قابلیت جدیدی است که طی چند سال اخیر به این زبان افزوده شده و کار کردن با توابع ناهمگام را راحت‌تر کرده است.

یکی از رایج‌ترین و قدیمی‌ترین راه‌های مدیریت عملیات ناهمگام استفاده از توابع Callback هست که استفاده از اون خیلی راحت هست. وقتی عملیات نا‌همگام به پایان رسید، نتیجه‌ی این عملیات برای پردازش می‌تونه به یک تابع فرستاده بشه که به این تابع میگن Callback. توی مثال بالا آرگومان دوم متد get یک تابع Callback هست که نتیجه درخواست Ajax ما رو پردازش می‌کنه.
استفاده از توابع Callback ظاهرا راحت هست. اما وقتی چند عملیات ناهمگام متوالی داشته باشیم چطور؟ یعنی برای مثال یک Ajax بعد از اجرا شدن یک Ajax دیگه:

$.get('http://example.com/users', function(res1) {
    $.get('http://example.com/posts?users=' + res1.users, function(res2) {

    });
});

Promise در جاوا اسکریپت

Promise در جاوا اسکریپت به معنی عملیات غیرمتقارن است؛ یعنی عملیاتی که برای اجرا باید منتظر اجرای عملیات دیگری باشند. در واقع پرامیس یک شی نگهدارنده است که تابعی را به عنوان ورودی دریافت کرده و پس از اتمام اجرای آن، با یک تابع callback، فراخوانی می‌شود. یک پرامیس می‌توانید در یکی از یکی از وضعیت قرار بگیرد:

pending: هنگامی که promise ایجاد می شود، در حالت موفقیت یا شکست قرار می گیرد.

resolved: هنگامی که promise بازگشت داده می شود و در حالت حل شده قرار می گیرد.

fulfilled: هنگامی که promise با موفقیت حل می شود مقدار را برمیگرداند که میتوان با زنجیره زدن then به مقدار آن دسترسی پیدا کرد.

rejected:‌ هنگامی که promise بدون موفقیت حل می شود که یک پیغام خطا را برای رد شدن آن برمی گرداند که با زنجیره زدن catch به مقدار آن می توان دسترسی پیدا کرد.

Promises و async/await را ببینیم!

promise : 
const promise = () => {
  return new Promise(resolve => {
    setTimeout(() => resolve("done!"), 1000);
  })
};
 
async/await :
const promise = async () => {
  console.log(await promiseAsync());
};

async function fun(){
	// body of the function
}

async function myAsync(){
	let value = await wait(3);
	console.log(value);
	value = await wait(4);
	console.log(value);
	value = await wait(5);
	console.log(value);
}