แนะนำ Promise ใน JavaScript

คุณทราบแล้วว่าการใช้โมเดล asynchronous แบบ callback นำไปสู่สถานการณ์ callback hell ได้ง่าย ดังนั้นใน JavaScript จึงได้มีการนำเข้าโมเดลใหม่ที่มีชื่อว่า พรอมิส (promise) เรามาเรียนรู้โมเดลนี้กัน

พรอมิสเป็นอ็อบเจ็กต์ ซึ่งจะรับฟังก์ชันเป็นพารามิเตอร์ ภายในฟังก์ชันนี้เราจะต้องวางโค้ด asynchronous ของเรา:

let promise = new Promise(function() {
	// โค้ด asynchronous
});

อย่างที่คุณเห็น ฉันเขียนอ็อบเจ็กต์ promise ลงในตัวแปร promise ในส่วนอื่น ๆ ของโค้ด ฉันสามารถนำตัวแปรนี้ไปใช้กับ เมธอด then โดยส่งฟังก์ชันเข้าไป พร้อมโค้ดที่ต้องถูกดำเนินการเมื่อ โค้ด asynchronous ที่เขียนไว้ ตอนสร้างพรอมิสนี้เสร็จสิ้น:

promise.then(function() {
	// จะทำงานเมื่อโค้ด asynchronous เสร็จสิ้น
});

ฟังดูสับสน งั้นมาดูตัวอย่างกัน สมมติว่าฉันมีโค้ด asynchronous แบบนี้:

setTimeout(function() {
	let result = [1, 2, 3, 4, 5];
}, 3000);

สมมติว่าฉันต้องการแก้ไขปัญหาหลัก ของ asynchronous สำหรับมัน: เพื่อดำเนินการ โค้ดบางส่วนหลังจากที่ตัวจับเวลาเกิดเหตุการณ์ ในขณะที่ฉันไม่ต้องการวางโค้ดนี้ไว้ในตัวจับเวลา และต้องการให้ผลลัพธ์ที่ฉันเขียนไว้ในตัวแปร result ส่งเข้าไปในโค้ดนี้ โดยทั่วไป เราแก้ไขปัญหานี้ในบทเรียนที่แล้ว ผ่าน callback และการสมัครสมาชิก มาดูกัน ตอนนี้ว่าจะทำอย่างไรผ่าน promise

ก่อนอื่นต้องนำโค้ด asynchronous ของเรา ไปห่อด้วย promise:

let promise = new Promise(function() {
	setTimeout(function() {
		let result = [1, 2, 3, 4, 5];
	}, 3000);
});

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

let promise = new Promise(function(resolve) { // ระบุพารามิเตอร์
	setTimeout(function() {
		let result = [1, 2, 3, 4, 5];
	}, 3000);
});

เราสามารถใช้ฟังก์ชันเสร็จสิ้นนี้เพื่อระบุ กับ promise อย่างชัดเจนว่าโค้ด asynchronous เสร็จสิ้นแล้ว โดยเราต้องเรียกฟังก์ชันนี้ใน ตำแหน่งที่เราต้องการ:

let promise = new Promise(function(resolve) {
	setTimeout(function() {
		let result = [1, 2, 3, 4, 5];
		resolve(); // เสร็จสิ้น promise
	}, 3000);
});

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

let promise = new Promise(function(resolve) {
	setTimeout(function() {
		let result = [1, 2, 3, 4, 5];
		resolve(result); // ส่งผลลัพธ์
	}, 3000);
});

แน่นอนว่า เราสามารถกำจัดตัวแปรชั่วคราวได้:

let promise = new Promise(function(resolve) {
	setTimeout(function() {
		resolve([1, 2, 3, 4, 5]);
	}, 3000);
});

ตอนนี้ในที่อื่นใด ๆ เราสามารถเรียก เมธอด then ของ promise ของเราได้:

promise.then(function() {
	// จะทำงานเมื่อ promise เสร็จสิ้น
});

ผลลัพธ์การทำงานของ promise จะส่งเข้าไปในพารามิเตอร์แรก ของฟังก์ชัน ถ้าเราต้องการระบุมัน:

promise.then(function(result) {
	console.log(result); // จะแสดงอาร์เรย์พร้อมผลลัพธ์
});

สร้าง promise ขึ้นมา โดยภายในจะมีดีเลย์ เป็นเวลา 5 วินาที หลังจากนั้น promise ควรจะ ทำงานเสร็จสิ้น โดยส่งคืนข้อความบางข้อความกลับมาเป็นผลลัพธ์ของมัน แสดงข้อความนี้บนหน้าจอ