# JavaScript Promise & async/await

JavaScript တွင် Asynchronous process များအတွက် Callback များကို သုံးနိုင်သည်။ Asynchronous Process ဆိုသည်မှာ Synchronous Process ၏ ဆန့်ကျင်ဘက်ဖြစ်သည်။ Synchronous Process ဆိုသည်မှာ လုပ်ငန်းစဉ်များကို တစ်ခုပြီးမှသာ နောက်တစ်ခု ဆက်ခြင်းအားဖြင့် အစီအစဉ်အတိုင်း အလုပ်လုပ်သွားသည့် Process ဖြစ်သည်။ Asynchronous Process များတွင် လုပ်ငန်းစဉ်တစ်ခု ပြီးဆုံးအောင် နောက်တစ်ခုက စောင့်ရန်မလို၊ ကြိုတင်၍သော်လည်ကောင်း၊ ပြိုင်တူသော်လည်ကောင်း ဆောင်ရွက်သည့် သဘောဖြစ်သည်။

ဥပမာ - ကောင်မလေးတစ်ယောက်ကို ချဉ်းကပ်စကားပြောလိုသည့် လူငယ်တစ်ဦး ရှိသည် ဆိုကြပါစို့။ ထိုလုပ်ငန်းစဉ်အတွက် Synchronous Process ကို သုံးပါက အောက်ပါအတိုင်း ဖြစ်ပေလိမ့်မည်။

```javascript
function check() {
	// walk to her
	// status = check her out

	return status;
}

function greet(status) {
	if(status.cute) {
		// say 'Hello, I like you'
	} else {
		// say 'Hello, good bye'
	}
}

var status = check();
greet(status);
```

နမူနာအရ.. ပထမဦးစွာ `check()` Function ကိုသုံး၍ ကောင်မလေးနားသွားကာ အခြေအနေကို အကဲခတ်ပေမည်။ အခြေအနေ သိရပြီပြီးနောက်မှ (သို့) `check()` Function အလုပ်လုပ်၍ ပြီးပြီဆိုမှ.. အခြေအနေပေါ် မူတည်၍ `greet()` Function ကို သုံး၍ မည်သည့်စကား ပြောမည်ကို ဆုံးဖြတ်ခြင်း ဖြစ်ပေသည်။

ဤ Process ကို Callback အသုံးပြု၍ Asynchronous ပုံစံ ပြောင်းလဲ အလုပ်လုပ်စေမည်ဆိုပါက အောက်ပါအတိုင်း ဖြစ်ပေလိမ့်မည်။

```javascript
function check(greet) {
	// walk to her
	// status = check her out

	greet(status);
}

check(function(status) {
	if(status.cute) {
		// say 'Hello, I like you'
	} else {
		// say 'Hello, good bye'
	}
});
```

`check()` Function ကို ခေါ်ယူစဉ် `check()` Function အလုပ်လုပ်၍ ပြီးအောင်စောင့်မနေပဲ.. ဆက်လက်အလုပ်လုပ်ရမည့် `greet()` Function ကို Callback အဖြစ် (သို့) Parameter အဖြစ် လက်ဆင့်ကမ်း ပေးလိုက်ခြင်းဖြစ်သည်။ အခြေအနေသိရပြီးနောက်မှ မည်သည့်စကား ပြောမည်ကို ဆုံးဖြတ်ခြင်း မဟုတ်ပဲ၊ အခြေအနေ သိရလျှင်မည်သည့်စကား ပြောမည်ကို ကြိုတင်ဆုံးဖြတ် သတ်မှတ်ပေးလိုက်ခြင်း ဖြစ်ပေသည်။

ဤနည်းဖြင့် JavaScript တွင် Callback များကိုသုံးကာ Asynchronous Code များ ရေးသားနိုင်သည်။ ယခုအခါ ES6 ဟုခေါ်သော JavaScript နည်းသစ်နှင့်အတူ `Promise` ဟုခေါ်သော ရေးထုံးအသစ်ပါဝင်လာသည်။ `Promise` ကို အသုံးပြု၍လည်း Asynchronous Code များ ရေးသားနိုင်ပေသည်။ ဥပမာ -

```javascript
function check() {
	// walk to her
	// status = check her out

	return new Promise(function(resolve, reject) {
		if(status.cute) {
			resolve();
		} else {
			reject();
		}
	});
}

check().then(function(resolve) {
	// say 'Hello, I like you'
}).catch(function(reject) {
	// say 'Hello, good bye'
});
```

နမူနာအရ `check()` Function သည် `Promise` Object တစ်ခုကို `return` ပြန်ပေးသည်။ ၄င်း `Promise` Object ၏ Callback Function က အခြေအနေပေါ်မူတည်၍ `resove` (သို့မဟုတ်) `reject` ကို အလုပ်လုပ်ပေးသည်။ `check()` Function ကို ခေါ်ယူသည့်အခါ ၄င်း Function အလုပ်လုပ်၍ပြီးအောင် စောင့်ရန်မလိုပဲ `then()` Function ဖြင့် `resolve` ဖြစ်လျှင် ဆက်လက် ဆောင်ရွက်ရမည့် အလုပ်ကို သတ်မှတ်နိုင်ပြီး `catch()` Function ဖြင့် `reject` ဖြစ်လျှင် ဆက်လက်ဆောင်ရွက်ရမည့် အလုပ်ကို သတ်မှတ်နိုင်ပေသည်။

ရှုပ်ထွေးလှသည့် သဘောသဘာဝ မဟုတ်သော်လည်း `Promise`, `resolve`, `reject`, `then` စသည့် နားလည်ရခက်သည့် အသုံးအနှုံးများကြောင့် မျက်စိလည်ချင်စရာ ကောင်းလှသည်။ မျက်စိလည်သွားလျှင် သင်တစ်ယောက်တည်းမဟုတ်၊ အခြားသူများလည်း လည်ကြသည်ဟု မှတ်ပါလေ။ လည်လက်စနှင့် `then()` ၏ အတွဲလိုက် အသုံးပြုနိုင်ပုံကို ဆက်လက်လေ့လာကြည့်ပါ။

```javascript
check().then(function(resolve) {
	return 'Hello, I like you';
}).then(function(resolve) {
	// say ${ resolve }
}).catch(function(reject) {
	// say 'Hello, good bye'
});
```

ပထမ `then()` က `return` ပြန်ပေးလိုက်သော တန်ဖိုးကို ဒုတိယ `then()` က ဆက်လက်အသုံးပြုသွားခြင်း ဖြစ်ပေသည်။

ဤမျှမကသေး။ ES7 ခေါ် နောက်တစ်ဆင့် ထပ်တက်သွားသည့် စနစ်တွင် `async` `await` ခေါ် Asynchronous ကုဒ်များ ရေးသားနိုင်သည့် ရေးထုံး ထပ်မံပါဝင်လာပြန်သည်။

```javascript
function check() {
	// walk to her
	// status = check her out

	return new Promise(function(resolve) {
		if(status.cute) {
			resolve('Hello, I like you');
		}
	});
}

async function greet() {
	var result = await check();
	// say ${ result }
}

greet()
```

နမူနာအရ `check()` Function သည် `Promise` ကိုပင် `return` ပြန်ပေးသည်ကို သတိပြုရမည်။ သို့သော် `then()` `catch()` ရေးထုံးအစား `async` Function ရေးထုံးကို ပြောင်းလဲအသုံးပြုထားသည်။ `var result = await check()` ၏ အဓိပ္ပါယ်မှာ `check()` Function အလုပ်လုပ်၍ ပြီးအောင်စောင့်ပြီးမှ ၄င်းအောက်ရှိ ကျန်ကုဒ်များ ဆက်လက်အလုပ်လုပ်မည့် သဘောပင်ဖြစ်သည်။ `result` ၏ တန်ဖိုးမှာ Promise `resolve` မှ ပြန်ပေးသည့် တန်ဖိုးဖြစ်ပေမည်။ စောင့်ပြီးမှ ဆက်လက်သည့်အတွက် Synchronous ဖြစ်မနေဘူးလား? မဖြစ်ပါ။ `greet()` Function ကြေငြာစဉ်က `async` ဟု ပြောထား၍ Function ထဲကကုဒ်များ Synchronous ဖြစ်နေသော်လည်း ၄င်း Function ကိုယ်တိုင်ကမူ Asynchnorous ဖြစ်နေပေသည်။ သူကို ကျန်လုပ်ဆောင်ချက်များက စောင့်ရန်မလိုပဲ ဆက်လက် အလုပ်လုပ်နိုင်ပေတော့သည်။

**ရှုပ်ထွေးလှပါပေစွတကား...**