วิธีใช้ Async และ Await ใน JavaScript

Promises ที่เปิดตัวใน ES6 ช่วยให้คุณสามารถเขียนโค้ดแบบอะซิงโครนัสได้อย่างง่ายดายโดยไม่ต้องจัดการกับฟังก์ชันการโทรกลับที่แตกต่างกัน ด้วย Promises คุณไม่จำเป็นต้องกังวลเกี่ยวกับฟังก์ชันการเรียกกลับหลายระดับซึ่งทั้งเขียนและบำรุงรักษายาก

มีคุณลักษณะอื่นใน JavaScript ที่ช่วยให้เขียนโค้ดแบบอะซิงโครนัสได้ง่ายขึ้นโดยใช้ Promises:async/await สิ่งเหล่านี้ทำให้คุณสามารถเขียนโค้ดที่ดูเหมือนซิงโครนัสแต่จริง ๆ แล้วทำรูทีนแบบอะซิงโครนัสได้

ในคู่มือนี้ เราจะพูดถึงว่าฟังก์ชัน async/await คืออะไร และคุณจะใช้งานฟังก์ชันนี้ในโค้ดได้อย่างไร เริ่มกันเลย!

สัญญา:ทบทวน

ก่อนที่เราจะเริ่มพูดถึงฟังก์ชัน async/await เราต้องสรุป Promises สัญญาแสดงถึงการดำเนินการแบบอะซิงโครนัส มันบอกรหัสของคุณว่าจะมีการดำเนินการ และหากการดำเนินการสำเร็จ ค่าจะถูกส่งคืน มิฉะนั้น ข้อผิดพลาดจะถูกส่งกลับไปยังส่วนที่เหลือของโปรแกรมของคุณ

สัญญาแสดงถึงค่าที่ไม่รู้จักเมื่อมีการสร้างสัญญา Promise คือคำมั่นสัญญาที่ว่าค่าในอนาคตจะถูกส่งกลับไปยังโค้ดของคุณ เนื่องจาก Promise เป็นวัตถุ มันจึงต้องเป็นตัวพิมพ์ใหญ่

พิจารณาสถานการณ์นี้ คุณต้องดึงทรัพยากรจาก API การดำเนินการนี้จะใช้เวลาหนึ่งหรือสองวินาทีในการดำเนินการ แทนที่จะให้ผู้ใช้รอการประมวลผลคำขอ คุณสามารถย้ายรหัสของคุณไปที่ Promise เพื่อให้โปรแกรมที่เหลือของคุณทำงานต่อไปได้

ซึ่งหมายความว่าคุณสามารถแสดงส่วนต่อประสานผู้ใช้ของเว็บไซต์ของคุณต่อไปได้ในขณะที่กำลังดึงข้อมูล ทันทีที่ค่าถูกส่งกลับ Promise จะส่งไปยังโปรแกรมหลักของคุณ

นี่คือตัวอย่าง Promise:

81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้

ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก

let sendCookies = new Promise(resolve => {
	setTimeout(() => {
		resolve("Your cookies have been sent!");
	}, 1000);
});

sendCookies.then(data => {
	console.log(data);
})

รหัสของเราส่งคืน:ส่งคุกกี้ของคุณแล้ว! เมื่อเรารันเมธอด sendCookies.then() คำมั่นสัญญาของเราจะเริ่มต้นขึ้น โปรแกรมของเรารอ 1,000 มิลลิวินาที แล้วส่งกลับค่า “คุกกี้ของคุณถูกส่งแล้ว!” สู่โปรแกรมหลักของเรา

วิธีใช้ Async และ Await

ในฟังก์ชัน async/await คำสั่ง await จะบล็อกโค้ดของคุณไม่ให้ทำงานภายในฟังก์ชัน async จนกว่าจะมีการส่งคืน Promise ด้วยเหตุผลนี้เองที่นักพัฒนามักกล่าวว่าฟังก์ชัน async/await มีลักษณะแบบซิงโครนัสแต่ทำงานแบบอะซิงโครนัส

ลองพิจารณาตัวอย่างต่อไปนี้:

function sendCookies() {
	return new Promise(resolve => {
		setTimeout(() => {
			resolve("Your cookies have been sent!");
		}, 1000);
	});
}

async function main() {
	const sendMessage = await sendCookies();
	console.log(sendMessage);
}

main();

รหัสของเราส่งคืน:ส่งคุกกี้ของคุณแล้ว! ฟังก์ชัน sendCookies() ของเราใช้เวลา 1,000 มิลลิวินาทีในการคืนค่า “ส่งคุกกี้ของคุณแล้ว” ในกรณีนี้ เราได้ประกาศฟังก์ชัน async เพื่อให้โค้ดของเรารอคำสัญญาที่จะแก้ไขหรือถูกปฏิเสธ

คีย์เวิร์ด "async" จะบอกโค้ดของเราว่าเราต้องการดำเนินการแบบอะซิงโครนัสในฟังก์ชันของเรา คีย์เวิร์ด "await" บอกให้โค้ดของเรารอการส่งคืน sendCookies() Promise ก่อนที่จะรันโปรแกรมของเราต่อไป

ฟังก์ชัน Async จะคืนค่า Promise เสมอ

ใช้ Async และรอด้วยหลายขั้นตอน

ฟังก์ชัน Async/await มักใช้เมื่อมีสัญญาหลายฉบับที่คุณต้องการใช้งาน บางครั้งเรียกว่า Promises chaining เนื่องจากรหัสของคุณจะรอให้ Promise ถูกส่งกลับในแต่ละขั้นตอนก่อนที่จะไปยังขั้นตอนถัดไป:

function processOrder()  {
	return new Promise(resolve => {
		setTimeout(() => {
			resolve("Your cookie order is being processed...");
		}, 1000);
	});
}

function sendCookies() {
	return new Promise(resolve => {
		setTimeout(() => {
			resolve("Your cookies have been sent!");
		}, 1000);
	});
}

async function main() {
	const processingMessage = await processOrder();
	console.log(sendMessage);

	const sendMessage = await sendCookies();
	console.log(sendMessage);
}

รหัสของเราส่งคืน:

Your cookie order is being processed…
Your cookies have been sent!

แต่ละขั้นตอนใช้เวลา 1,000 มิลลิวินาทีจึงจะเสร็จสมบูรณ์ ฟังก์ชัน sendCookies() ของเราจะไม่ถูกดำเนินการจนกว่าจะมีการส่งคืน Promise จากฟังก์ชัน processOrder()

นิพจน์แบบอะซิงโครนัส

คุณสามารถใช้ฟังก์ชัน async/await ได้สามวิธี

วิธีแรกคือแนวทางที่เราได้แสดงในตัวอย่างล่าสุด:ผ่านการประกาศฟังก์ชัน ในตัวอย่างของเรา เราได้ประกาศฟังก์ชันที่ส่งคืน Promise จากนั้นเราใช้คีย์เวิร์ด "async" และ "await" เพื่อดำเนินการฟังก์ชันเหล่านั้น

คุณยังสามารถประกาศฟังก์ชัน async โดยใช้ฟังก์ชันลูกศร:

const main = async () => {
	const sendMessage = await sendCookies();
	console.log(sendMessage);
}

รหัสนี้ส่งคืน:ส่งคุกกี้ของคุณแล้ว! เหมือนกับตัวอย่างแรกของเรา แต่แทนที่จะประกาศฟังก์ชัน main() เราได้ใช้ฟังก์ชันลูกศรแทน

ในทำนองเดียวกัน คุณสามารถใช้ไวยากรณ์นิพจน์ฟังก์ชัน:

const main = async function() {
	const sendMessage = await sendCookies();
	console.log(sendMessage);
}

รหัสนี้ส่งคืน:ส่งคุกกี้ของคุณแล้ว! อย่างที่คุณเห็น ผลลัพธ์จะเหมือนเดิมอีกครั้ง ข้อแตกต่างเพียงอย่างเดียวคือวิธีที่เราประกาศหน้าที่ของเรา

อันที่จริง ไวยากรณ์นี้คล้ายกับตัวอย่างสุดท้ายของเรามาก เราเพิ่งใช้คีย์เวิร์ด “function()” แทนการใช้ฟังก์ชันลูกศร

ไม่มีวิธีที่ดีที่สุดในการประกาศฟังก์ชัน async/await ทั้งหมดขึ้นอยู่กับโปรแกรมที่คุณกำลังเขียนและรูปแบบไวยากรณ์ที่คุณต้องการ แม้ว่าคุณอาจโต้แย้งได้ว่าฟังก์ชันลูกศรเป็นวิธีที่รัดกุมที่สุด แต่วิธีอื่นๆ ในการประกาศฟังก์ชัน async/await อาจดีกว่าในกรณีอื่นๆ

การประมวลผลคำขอของเว็บโดยใช้ Async/Await

การใช้งานทั่วไปอย่างหนึ่งของฟังก์ชัน async/await คือการประมวลผลคำขอเว็บด้วย API ที่อิงตามสัญญา เช่น fetch() คุณสามารถอ่านเพิ่มเติมเกี่ยวกับวิธีใช้ฟังก์ชัน fetch() ได้ในคู่มือเริ่มต้นใช้งาน JavaScript fetch

ลองพิจารณาตัวอย่างนี้:

async function retrieveComments() {
	const res = await fetch('https://jsonplaceholder.typicode.com/comments');
	var comments = await res.json();

	comments = comments.map(comment => comment.name);

	console.log(comments);
}

retrieveComments();

รหัสของเราส่งคืน:

["id labore ex et quam laborum", "quo vero reiciendis velit similique earum" …]

เมื่อเราเรียกใช้ฟังก์ชันดึงความคิดเห็น () เราจะใช้คีย์เวิร์ด "รอ" เพื่อรอให้คำสั่งดึงข้อมูลของเราทำงาน ซึ่งหมายความว่าโปรแกรมที่เหลือของเราจะไม่ดำเนินการต่อจนกว่าคำขอทางเว็บของเราจะได้รับการดำเนินการ เนื่องจากฟังก์ชัน fetch() คืนค่า Promise

เมื่อ Promise ถูกส่งกลับโดยฟังก์ชัน fetch() เราจะแปลงค่าที่ส่งคืนเป็น JSON จากนั้นเราจับคู่วัตถุเพื่อดึงรายชื่อความคิดเห็นทั้งหมดและพิมพ์รายการนั้นไปที่คอนโซล

วิธีจัดการกับข้อผิดพลาด

โอ้ฉันหวังว่าข้อผิดพลาดจะไม่เกิดขึ้นในโค้ด แต่พวกเขาทำ และเป็นสิ่งที่นักพัฒนาอย่างเราต้องวางแผน ในฟังก์ชันอะซิงโครนัส การจัดการข้อผิดพลาดจะทำพร้อมกันโดยใช้คำสั่ง try…catch พิจารณารหัสนี้:

async function retrieveCookies() {
	const res = await fetch('https://thisapidoesnotexist.app/cookies');
	var cookieNames = await res.json();

	cookieNames = cookieNames.map(cookie => cookie.name);

	resolve(cookieNames);
}

async function printCookies() {
	const cookies = await retrieveCookies();
	console.log(cookies);
}

printCookies().catch(res => console.log(res.message));

รหัสของเราส่งคืน:

NetworkError when attempting to fetch resource. While our code is functional, the API we are trying to access does not exist. This means that our Promise cannot return any data, so it instead returns a rejected Promise.

ในตัวอย่างของเรา เราได้ใช้คำสั่ง .catch() เพื่อพิมพ์ข้อผิดพลาดที่ส่งคืนโดยฟังก์ชันของเราหากมีการส่งคืน ในกรณีนี้ เราใช้ปฏิเสธ('ข้อผิดพลาด') เพื่อบอกรหัสของเราว่ามีข้อผิดพลาดเกิดขึ้น

หากคำสั่งนี้ถูกดำเนินการ คำสั่ง .catch() ของเราจะเริ่มทำงานและพิมพ์ข้อผิดพลาดนั้น

ในทำนองเดียวกัน ฟังก์ชัน async สามารถตรวจจับข้อผิดพลาดทางไวยากรณ์ได้:

async function retrieveCookies() {
	const res = await fetch('https://thisapidoesnotexist.app/cookies');
	var cookieNames = await res.json();

	cookieNames = cookieNames.map(cookie => cookie.name);

	resolve(cookieNames);
}

async function printCookies() {
	try {
		const cookies = await retrieveCookies();
		console.log(cookies);
	} catch(error) {
		console.log(error);
	}
}

printCookies();

รหัสของเราส่งคืน:NetworkError เมื่อพยายามดึงทรัพยากร ในตัวอย่างนี้ เราใช้คำสั่ง try/catch เพื่อตรวจสอบว่าวิธีการรอของเราส่งคืน Promise ที่สำเร็จหรือไม่ ขอย้ำอีกครั้งว่า API ของเราไม่ถูกต้อง ซึ่งทำให้โปรแกรมของเราปฏิเสธคำมั่นสัญญาของเรา เมื่อสิ่งนี้เกิดขึ้น คำสั่ง "catch" ในบล็อก try/catch ของเราจะถูกดำเนินการ ซึ่งจะบันทึกข้อผิดพลาดของเราไปที่คอนโซล

บทสรุป

ฟังก์ชัน Async/await ช่วยให้คุณเขียนการดำเนินการแบบอะซิงโครนัสในโค้ดของคุณได้ เมื่อมีการประกาศฟังก์ชัน async คุณสามารถใช้คีย์เวิร์ด "await" เพื่อรอให้การดำเนินการแก้ไข ต้องใช้คีย์เวิร์ด await กับฟังก์ชันที่ส่งคืน Promise

ตอนนี้คุณพร้อมที่จะเริ่มใช้ฟังก์ชัน async/await JavaScript อย่างผู้เชี่ยวชาญแล้ว!