วิธีใช้สัญญาจาวาสคริปต์

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

ใน ES6 คำสัญญาเข้ามาช่วย คำสัญญาเป็นวิธีการเขียนโค้ดแบบอะซิงโครนัสอย่างมีประสิทธิภาพใน JavaScript

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

สัญญาคืออะไร

สัญญาคือวัตถุที่ส่งคืนการตอบกลับที่คุณต้องการได้รับในอนาคต

วิธีที่ดีในการคิดเกี่ยวกับคำสัญญาของ JavaScript คือการเปรียบเทียบกับวิธีที่ผู้คนให้คำมั่นสัญญา เมื่อคุณให้คำมั่นสัญญา มันเป็นการประกันว่าคุณกำลังจะทำอะไรบางอย่างในอนาคต คุณจะไม่ทำสิ่งนั้นตอนนี้ คุณจะทำมันในบางจุดในภายหลัง

สัญญาสามารถมีอยู่ในสถานะใดสถานะหนึ่งจากสามสถานะ:

• รอดำเนินการ:สัญญายังไม่เสร็จสิ้น
• ปฏิเสธ:สัญญาไม่สามารถคืนค่าได้
• สำเร็จแล้ว:สัญญาสำเร็จแล้ว

สิ่งนี้คล้ายกับคำสัญญาในชีวิตจริง คุณสามารถมีสัญญาที่รอดำเนินการซึ่งคุณบอกว่าคุณกำลังจะดำเนินการในอนาคต คุณสามารถทำตามสัญญาได้ คุณสามารถปฏิเสธหรือ “ผิดสัญญา” และไม่ปฏิบัติตามสิ่งที่คุณตกลงจะทำ

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

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

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

วิธีสร้างสัญญา JavaScript

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

ในการสร้าง Promise เราต้องสร้าง Promise object:

new Promise((resolve, reject) => { 
	// Your code here
});

สัญญายอมรับข้อโต้แย้งสองข้อ:ฟังก์ชันที่จัดการความสำเร็จของสัญญาและฟังก์ชันที่จัดการกับคำสัญญาที่ล้มเหลว ซึ่งหมายความว่าคำมั่นสัญญาของเราจะคืนค่าที่แตกต่างกันขึ้นอยู่กับผลลัพธ์

สัญญาควรมีคำสั่ง "if" ที่กำหนดว่าสัญญาได้ดำเนินการสำเร็จหรือไม่ หากสัญญาไม่สำเร็จ ควรส่งคืนสัญญาของรัฐที่ถูกปฏิเสธ:

new Promise((resolve, reject) => { 
	if (value is true) {
		resolve();
	} else {
		reject();
	}
});

เปิดไฟล์ JavaScript ใหม่และคัดลอกในรหัสต่อไปนี้:

let returnName = new Promise((resolve, reject) => {
	let name;
	setTimeout(() => {
		name = "Cinnamon";

		if (name === "Cinnamon") {
			resolve(name);
		} else {
			reject("This promise has failed.");
		}
	}, 3000);
});

รหัสนี้ส่งคืนชื่อ Cinnamon ไปยังโปรแกรมหลักของเราเมื่อเราเรียกคำมั่นสัญญา รหัสนี้ใช้เวลาสามวินาทีในการรัน หรือ 3,000 มิลลิวินาที ซึ่งหมายความว่าเมื่อเราเรียกคำมั่นสัญญาของเรา จะรอดำเนินการเป็นเวลาสามวินาที หลังจากตกลงกันตามสัญญาแล้ว สัญญาที่แก้ไขแล้วหรือถูกปฏิเสธจะถูกส่งกลับไปยังโปรแกรมหลักของเรา

หาก “ชื่อ” เท่ากับ “อบเชย” คำมั่นสัญญาของเราจะได้รับการแก้ไขสำเร็จ มิฉะนั้น คำสัญญาของเราจะถูกปฏิเสธ ในตัวอย่างนี้ "ชื่อ" ถูกตั้งค่าเป็น "อบเชย" เนื่องจากเราได้ระบุชื่อ คำมั่นสัญญาของเราจึงแก้ไขได้เอง

then() และ catch() ด้วย Promises

รหัสของเรายังไม่ทำงาน เราต้องเรียกวัตถุสัญญาของเรา:

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

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

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

then() จัดการสัญญาที่ประสบความสำเร็จเท่านั้น จะเกิดอะไรขึ้นถ้าคำสัญญาของเราถูกปฏิเสธ? นั่นคือสิ่งที่ catch() วิธีการเข้ามา

คุณสามารถระบุ then() . ได้หลายรายการ ข้อความภายในสัญญา สิ่งนี้เรียกว่าการผูกมัดสัญญา ลองใช้ตัวอย่างเพื่อแสดงให้เห็นว่าการโยงทำงานอย่างไร:

returnName.then(data => {
	console.log(data);
}).then(() => {
	console.log("This function is over!");

รหัสนี้จะส่งคืน:

อบเชย

ฟังก์ชันนี้สิ้นสุดแล้ว

จากนั้น () คำสั่งจะดำเนินการตามลำดับที่ระบุไว้ในตัวสร้างสัญญา

catch() วิธีการแนบมากับคำสัญญาเช่น then() กระบวนการ. มาสร้างตัวจัดการที่จัดการคำสัญญาที่ถูกปฏิเสธสำหรับตัวอย่างชื่อของเรา:

returnName.then(data => {
	console.log(data);
}).catch(error => {
	console.log(error);
});

เราได้ยึด catch() . แล้ว คำสั่งหลังของเรา then() คำแถลง. ขอให้สังเกตว่าเราใช้เครื่องหมายอัฒภาค (;) ที่ส่วนท้ายสุดของรหัสสัญญาของเรา คุณไม่ควรระบุอัฒภาคหลัง then() เมธอด หากคุณใช้ catch() . สิ่งนี้จะบอก JavaScript ว่า then() และ catch() แยกจากกัน ดังนั้นข้อผิดพลาดจะถูกส่งคืนในโค้ดของคุณ

หากสัญญาของเราถูกปฏิเสธ เนื้อหาของคำสั่ง catch() จะทำงาน

มาดูกันว่าจะเกิดอะไรขึ้นเมื่อเรารันโค้ดของเรา:

อบเชย

ค่า Cinnamon ถูกส่งกลับเพราะคำสัญญาของเราแก้ไขได้สำเร็จ หากค่าของ "ชื่อ" ไม่ใช่ "อบเชย" ในคำสัญญาของเรา ข้อผิดพลาดจะถูกส่งคืน:

Uncaught (ตามสัญญา) สัญญานี้ล้มเหลว

เราระบุข้อความแสดงข้อผิดพลาด:“สัญญานี้ล้มเหลว” ในฟังก์ชันปฏิเสธ () ภายในสัญญาของเรา

สุดท้าย() กับคำสัญญา

จะเกิดอะไรขึ้นถ้าคุณต้องการรันบล็อกของโค้ดหลังจากดำเนินการตามสัญญา โดยไม่คำนึงว่าสัญญาจะสำเร็จหรือล้มเหลว

นั่นคือสิ่งที่ finally() คำสั่งมาในสะดวก finally() คำสั่งทำงานไม่ว่าสัญญาจะสำเร็จหรือถูกปฏิเสธ มาอัปเดตคำสัญญาของเราเพื่อใช้คำสั่งสุดท้าย:

returnName.then(data => {
	console.log(data);
}).catch(error => {
	console.log(error);
}).finally(() => {
	console.log("The returnName promise has been executed.");
});

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

อบเชย

สัญญา returnName ถูกดำเนินการแล้ว

คำสัญญาของเราส่งคืน Cinnamon เพราะมันประสบความสำเร็จ เนื้อหาของ finally() คำสั่งจะถูกดำเนินการซึ่งจะส่งคืนข้อความอื่นไปยังคอนโซลของเรา

บทสรุป

สัญญา JavaScript ช่วยให้คุณสามารถเขียนโค้ดอะซิงโครนัสที่สะอาดได้

ในคู่มือนี้ เราได้กล่าวถึงพื้นฐานของสัญญา มีคำสัญญามากกว่าที่เราได้กล่าวถึงในคู่มือนี้ ขั้นตอนต่อไปในเส้นทางการเรียนรู้ของคุณคือการเขียนคำสัญญาสองสามข้อในโค้ดของคุณเอง

ความท้าทายคือ:เขียนคำสัญญาซึ่งส่งคำขอเว็บและตอบกลับ ในการทำเช่นนี้ คุณจะต้องใช้ fetch() API เพื่อส่งคำขอ คำขอนี้ควรอยู่ในสัญญา คุณควรเขียนโค้ดที่จัดการกับคำมั่นสัญญาทั้งในกรณีที่สำเร็จหรือล้มเหลว

หากคุณต้องการดำเนินการต่อ โปรดดูฟังก์ชัน JavaScript async สามารถใช้เพื่อเขียนโค้ดแบบอะซิงโครนัสและมักใช้กับ Promises

ตอนนี้คุณพร้อมที่จะเริ่มเขียนคำสัญญา JavaScript อย่างผู้เชี่ยวชาญแล้ว!