در سری آموزش‌های ES6 ویژگی‌های کاربردی مختلفی را معرفی کردیم؛ مورد آخر از این مجموعه مربوط به مبحث promise است که در ادامه به بررسی آن می‌پردازیم. با ما همراه باشید.

کاربرد promise

برای مدیریت کردن کارهای async نیاز داریم تا از روش‌هایی متفاوت از روش‌های عادی استفاده کنیم. در جاوااسکریپت promise وظیفه‌ی این کار را برعهده دارد، به این‌صورت که برای هر کار async که می‌خواهیم انجام دهیم دو متد تعیین می‌کنیم که به محض تمام شدن این کار، به‌صورت خودکار بسته به نوع جواب یکی از این دو متد فراخوانی می‌شود. اگر کار به درستی انجام شده باشد، متد اول فراخوانی می‌شود و اگر کار به درستی انجام نپذیرفته باشد متد دوم فراخوانی می‌شود. نکته‌ی اصلی این قسمت این است که فراخوانی این متدها توسط خود جاوااسکریپت بلافاصله بعد از اتمام کار async انجام می‌پذیرد.

ساختار promise

برای تعریف کردن promise مثال زیر را ببینید تا به بررسی قسمت‌های مختلف آن بپردازیم:

var promise1 = new Promise(function(resolve, reject) {
	if (true) {
		resolve();
	} else {
		reject();
	}
});

promise1
.then(function(){console.log('yes');})
.catch(function(){console.log('no');});

ابتدا شیئی از promise می‌سازیم و کاری که قرار است انجام دهیم را در قالب تابع برای آن می‌فرستیم(خط ۱ تا ۷). این تابع دو آرگومان به اسم resolve و reject دریافت می‌کند. در صورتی که کار مورد نظر درست انجام شد، resolve و در غیر این‌صورت reject را فراخوانی می‌کنیم.

قدم بعدی مربوط به تعیین کارهایی است که بعد از اتمام کار اصلی باید انجام شوند. برای این کار اسم شیئی که ساختیم را می‌نویسیم و به دنبال آن .then() و بعد از آن .catch() را تایپ می‌کنیم. تابعی که به عنوان آرگومان برای then می‌فرستیم، زمانی اجرا می‌شود که resolve فراخوانی شده باشد، و تابعی که برای catch می‌فرستیم زمانی اجرا می‌شود که reject فراخوانی شده باشد.

برای روشن‌تر شدن موضوع، مثال زیر را ببینید:

var promise1 = new Promise(function(resolve, reject) {
	/* some async code (like xmlHttpRequest) */
	var answer = { status: 1, data: 'data' };
	if (answer.status == 1) {
		resolve(answer.data);
	} else {
		reject('something wrong');
	}
});

promise1
.then(function(data){console.log(data);})
.catch(function(error){console.log('error: ', error);});

در مثال بالا فرض می‌کنیم که درخواست xmlHttpRequest فرستادیم و جواب این درخواست را در متغیر answer داریم. در خط ۴ چک می‌کنیم که اگر status این پاسخ برابر ۱ بود، تابع resolve را فراخوانی کن و data را به عنوان آرگومان برای آن بفرست. در غیر این‌صورت عبارت something wrong را به عنوان آرگومان برای تابع reject قرار بده و فراخوانی کن.

اگر status برابر ۱ باشد تابع resolve را فراخوانی می‌کنیم،یعنی کد مربوط به قسمت then باید اجرا شود و data در خروجی چاپ می‌شود. اگر status برابر ۱ نباشد کد مربوط به قسمت catch اجرا می‌شود و error چاپ می‌شود.

در آخر نمونه‌ی همین کد را با استفاده از نوع تعریف متغیر و تابع در ES6 بازنویسی می‌کنیم.

var promise1 = new Promise((resolve, reject) => {
	/* some async code (like xmlHttpRequest) */
	const answer = { status: 1, data: 'data' };
	if (answer.status == 1) {
		resolve(answer.data);
	} else {
		reject('something wrong');
	}
});

promise1
.then(data => console.log(data))
.catch(error => console.log('error: ', error));

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

موفق باشید.