พรอมิสในรูปแบบซิงโครนัสใน JavaScript

เพื่อแก้ไขปัญหา promise hell ได้มีการคิดค้น ไวยากรณ์พิเศษสำหรับพรอมิสขึ้นมา ซึ่งช่วยให้ เขียนโค้ดแบบอะซิงโครนัสได้ง่ายขึ้นมาก - ใน รูปแบบซิงโครนัส

มาเริ่มศึกษามันกันเถอะ เริ่มต้นด้วยการนำโค้ด จากบทเรียนก่อนหน้ามาก่อน:

function func() {
	getSmth(2).then(res => {
		console.log(res); // แสดงผล 4
	});
}

func();

ถ้าฟังก์ชัน getSmth ของเราเป็น แบบซิงโครนัส เราก็จะสามารถเขียนโค้ดฟังก์ชัน func ใหม่ได้ดังนี้:

function func() {
	let res = getSmth(2);
	console.log(res); // แสดงผล 4
}

อย่างไรก็ตาม ฟังก์ชัน getSmth เป็นแบบอะซิงโครนัส ดังนั้นโค้ดด้านบนจึงทำงานไม่ได้ แต่ด้วยการใช้พรอมิสในรูปแบบซิงโครนัส เราก็จะได้สิ่งที่คล้ายกัน มาเริ่มทำกันเถอะ

ก่อนอื่นเราต้องประกาศให้ฟังก์ชัน func ของเราเป็นแบบอะซิงโครนัสด้วยคำสั่งพิเศษ async:

async function func() {
	
}

หลังจากนั้น เราจะสามารถใช้คำสั่งพิเศษ await ภายในฟังก์ชัน func ได้ คำสั่งนี้ เมื่อเขียนไว้หน้าพรอมิส จะบังคับให้ JavaScript รอจนกว่าพรอมิส จะทำงานเสร็จ หลังจากนั้นคำสั่งจะคืนค่า ผลลัพธ์ของพรอมิส และการดำเนินการของโค้ดจะดำเนินต่อไป

ในกรณีของเรา เราต้องเขียน await ก่อนเรียก getSmth เนื่องจากผลลัพธ์ ของการเรียกฟังก์ชันนี้จะเป็นพรอมิส ดังนั้นการดำเนินการ ของโค้ดต่อไปจะดำเนินต่อได้ก็ต่อเมื่อ พรอมิสนี้ทำงานเสร็จแล้วเท่านั้น และผลลัพธ์ ของพรอมิสก็สามารถเก็บไว้ในตัวแปรได้ มาทำตามที่อธิบายกัน:

async function func() {
	let res = await getSmth(2);
	console.log(res); // แสดงผล 4
}

func();

มาเรียก getSmth หลายๆ ครั้งกัน:

async function func() {
	let res1 = await getSmth(2);
	let res2 = await getSmth(3);
	
	console.log(res1 + res2); // แสดงผล 13
}

func();

และตอนนี้จะเรียก getSmth ในลูป:

async function func() {
	let arr = [1, 2, 3, 4, 5];
	let sum = 0;
	
	for (let elem of arr) {
		sum += await getSmth(elem);
	}
	
	console.log(sum);
}

func();

เขียนโค้ดต่อไปนี้ใหม่ ด้วยไวยากรณ์ซิงโครนัส:

function func() {
	getSmth(2).then(res1 => {
		getSmth(3).then(res2 => {
			getSmth(4).then(res3 => {
				console.log(res1 + res2 + res3);
			});
		});
	});
}

func();