การทำงานกับอาร์เรย์ของพรอมิสใน JavaScript

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

ทั้งสองเมธอดส่งคืนพรอมิสใหม่เป็นผลลัพธ์ของตัวเอง สำหรับเมธอด Promise.all ผลลัพธ์ ของพรอมิสนี้จะเป็นอาร์เรย์ของผลลัพธ์ทั้งหมด ของพรอมิสที่ส่งเข้ามา (ลำดับของผลลัพธ์ สอดคล้องกับลำดับของพรอมิสในอาร์เรย์) และสำหรับ Promise.race - ผลลัพธ์ของพรอมิส ตัวแรกที่ทำงานเสร็จ

มาดูกันในทางปฏิบัติ สมมติว่าเรามี อาร์เรย์ของพรอมิส:

let promises = [
	new Promise(resolve => setTimeout(() => resolve(1), 1000)),
	new Promise(resolve => setTimeout(() => resolve(2), 2000)),
	new Promise(resolve => setTimeout(() => resolve(3), 3000)),
];

มาใช้ Promise.all เพื่อรอ ให้การโหลดของพรอมิสทั้งหมดจาก อาร์เรย์ของเราเสร็จสิ้น:

Promise.all(promises).then(function(res) {
	console.log(res); // จะแสดง [1, 2, 3] - ผลลัพธ์ของพรอมิสทั้งหมด
});

และตอนนี้ใช้ Promise.race เพื่อรอ ให้การโหลดของพรอมิสตัวแรกเสร็จสิ้น:

Promise.race(promises).then(function(res) {
	console.log(res); // จะแสดง 1 - ผลลัพธ์ของพรอมิสตัวแรกที่ทำงานเสร็จ
});

หากมีพรอมิสอย่างน้อยหนึ่งตัวในอาร์เรย์ ถูกปฏิเสธ (rejected) พรอมิสที่ส่งคืนเป็นผลลัพธ์จะ เปลี่ยนสถานะเป็น rejected ทันที ดังนั้น ข้อผิดพลาดที่เกิดขึ้นสามารถดักจับได้ด้วยวิธี ปกติที่คุณเคยเรียนมาแล้ว เช่น ผ่าน catch:

Promise.all(promises).then(function(res) {
	console.log(res);
}).catch(function(err) {
	console.log(err);
});

สร้างฟังก์ชันที่ส่งคืนพรอมิส ภายใน ซึ่งมีการหน่วงเวลาแบบสุ่มจาก 1 ถึง 10 วินาที ให้พรอมิส ส่งคืนเวลาหน่วงนี้เป็นผลลัพธ์ของตัวเอง ใช้ลูปและฟังก์ชันของคุณเติม อาร์เรย์ด้วยพรอมิสจำนวน 10 ตัว

ใช้อาร์เรย์ของพรอมิสจากงานก่อนหน้า ทำให้ผลลัพธ์ของพรอมิสตัวแรกที่ทำงานเสร็จ แสดงออกมาที่คอนโซล

ใช้อาร์เรย์ของพรอมิสจากงานก่อนหน้า ทำให้ผลรวมของผลลัพธ์จากพรอมิสทั้งหมด แสดงออกมาที่คอนโซล