[JavaScript] Promise คืออะไร
ก่อนจะไปเริ่มกัน เราต้องเข้าใจคำว่า asynchronous ก่อนเป็นอันดับแรก asynchronous คือการทำงานแบบไม่ต้องการรอผลลัพธ์ ยกตัวอย่างง่าย ๆ เช่น การรอคิวเข้าร้านอาหาร ถ้าเป็น synchronous คือเราต้องรอจนกว่าจะได้คิว (เหมือนรอผลลัพธ์) ถึงจะเข้าไปในร้านได้ แต่ถ้าเป็นการทำงานแบบ asynchronous เราจะไม่ยืนรอคิวหน้าร้าน เราจะไปเดินเล่นเตร็ดเตร่ หรือทำธุระอย่างอื่น จนกว่าร้านค้าจะโทรมาตามเรา (ร้านค้าบอกผลลัพธ์เราว่าได้คิวแล้ว) แล้วจึงค่อยกลับมาเข้าร้าน
หมายเหตุ: เหมือนเคย หากใครยังไม่เข้าใจ arrow function แนะนำให้กดกลับไปอ่านก่อนนะครับ
Promise คืออะไร?
const promiseA = new Promise( (resolve, reject) => {
setTimeout(() => {//ให้ทำงานส่วนนี้หลังจาก 1 วินาที (1000 millsec)
resolve(777); //ใช้ resolve บอกว่างานสำเร็จ และคืนค่า 777 ไป
}, 1000);
});
promiseA.then((val) => console.log("asynchronous logging has val:",val) );//ใช้ .then จับว่าสำเร็จให้แสดงข้อความ
console.log("immediate logging");//บรรทัดนี้จะแสดงข้อความออกมาก่อนทันที เนื่องจากบรรทัดบนเป็น asynchronous
หลังจากดูตัวอย่างของงานที่สำเร็จไปแล้ว ลองดูตัวอย่างของงานที่ล้มเหลวกันบ้าง
const myFirstPromise = new Promise((resolve, reject) => {
setTimeout(() => {
reject("Failed to fetch data."); //return ข้อความกลับไป
}, 250)
})
myFirstPromise.catch((errorMessage) => {//ใช้ .catch จับเมื่อล้มเหลวให้แสดงข้อความ
console.log("Error! " + errorMessage); //แสดงผลข้อความเมื่อล้มเหลว
});
ต่อมาเป็นตัวอย่างรวมทั้งคู่เข้าด้วยกัน
let myPromise = new Promise((resolve, reject) => {
let x = 0; //ลองสลับเลขเพื่อดูผลลัพธ์เมื่อสำเร็จและล้มเหลว
if (x == 0) {
resolve("OK");
} else {
reject("x must be 0");
}
});
myPromise //สามารถเขียนต่อเป็น chaining ได้เลย
.then((msg) => console.log("Success: " + msg))
.catch((msg) => console.log("Error: " + msg));
โดยส่วนมากที่เจอการใช้ Promise บ่อย ๆ คือการเรียกข้อมูลจากฝั่ง server ด้วย ajax request มาแสดงผลข้อมูลทีหลัง ซึ่งปกติเรามักจะไม่ได้เขียน Promise ด้วยตัวเองเท่าไหร่นัก แต่จะใช้ library ที่ใช้งาน Promise เสียมากกว่า อย่างเช่น axios
ถ้ารู้สึกว่าการจัดการกับ Promise นั้นยาก รอบทความหน้าที่จะมาช่วยให้มันดูง่ายขึ้นนั่นคือ async / await
อ่างอิง:
ขอบคุณมากเลยครับสำหรับบทความ ตัวอย่างดูเข้าใจง่ายดีครับ
ตอบลบ