หลายครั้งที่เราเขียนโปรแกรมแล้วต้องการให้การทำงานของเราต้องทำอย่างหนึ่งเสร็จก่อนแล้วถึงจะทำอีกอย่างหนึ่ง แต่เนื่องด้วยบางครั้งเราต้องใช้คำสั่งที่การทำงานแบบ Asyncronous ซึ่งเป็นการทำงานแบบไม่รอกัน ดังนั้นเราจึงต้องบังคับให้โปรแกรมของเรารอกันก่อน ซึ่ง promise เป็นหนึ่งในทางเลือกที่สามารถมาแก้ปัญหานี้ได้ ซึ่งก่อนที่จะมาทำความรู้จักกับ promise เรามารู้จักกับ
Callback function
การใช้ callback function แบบซ้อนเองก็เป็นหนึ่งในตัวเลือกในการแก้ไขปัญหานี้เช่นกัน โดยหลักการคือเมื่อฟังก์ชันหนึ่งเสร็จก็จะส่งข้อความไปบอกอีกฟังก์ชันหนึ่งให้ทำงานต่อนั่นเอง ยกตัวอย่างเช่นถ้าเรามีการทำงานว่าเมื่อเราทำ doFirst เสร็จก็จะทำ doSecond ต่อก็จะได้ว่า
function doFirst(callback){
callback();
}
function doSecond(callback){
callback();
}
doFirst(function(){
doSecond(function(){
console.log('success');
});
});
จากโค้ดข้างต้นเราจะเห็นว่าการใช้วิธี callback นั้นจะต้องนำฟังก์ชันมาซ้อนกันเข้าไปข้างในไปเรื่อยๆ การทำงานเพียงไม่กี่อย่างก็จะไม่ค่อยเห็นปัญหาเท่าไหร่ แต่ถ้าเราต้องให้ทำงานหลายขั้นตอนเยอะๆ อาจจะทำให้เกิดอาการมึนงงได้ แล้วยิ่งต้องใส่ รูปแบบ callback functionเข้าไปอีกยิ่งทำให้ดูยาก
Promise
การทำงานของ promise นั้นง่ายมาก ถ้าเราต้องการให้ทำงานฟังก์ชัน doSecond ต่อการฟังก์ชัน doFirst เราแค่ใช้ .then หลังจากการเรียกฟังก์ชัน doFirst แล้วใส่ฟังก์ชัน doSecond ลงไป แบบนี้
doFirst().then(doSecond).then(function(){
console.log('success');
});โดยที่ฟังก์ชันของเราจะต้อง return promise โดยที่ promise จะต้องใส่พารามิเตอร์เป็น callback function ที่ใส่ fullfill และ reject ลงไป โดยที่การทำงานของfullfill จะเป็นการทำงานที่เป็นการทำงานปกติ และ reject จะเป็นเคสที่เราไม่ต้องการให้เกิดแบบนี้
function doFirst(){
return new Promise(function (fulfill, reject){
if (error) reject(error);
else fulfill(respond);
});
}พอนำมาประกอบร่างกันก็จะได้แบบนี้
function doFirst(){
return new Promise(function (fulfill, reject){
if (error) reject(error);
else fulfill(respond);
});
}
function doSecond(){
return new Promise(function (fulfill, reject){
if (error) reject(error);
else fulfill(respond);
});
}
doFirst().then(doSecond).then(function(){
console.log('success');
});จะเห็นได้ว่าตอนเรียกใช้ฟังก์ชัน ไม่ต้องใส่callbackฟังก์ชันเข้าไปแล้ว แถมการเขียนตอนเรียกก็สั้นและอ่านได้ง่ายกว่าแบบเก่ามาก
หากคุณสนใจพัฒนา สตาร์ทอัพ แอปพลิเคชัน และ เทคโนโลยีของตัวเอง ?
อย่ารอช้า ! เรียนรู้ทักษะด้านดิจิทัลเพื่ออัพเกรดความสามารถของคุณ
เริ่มตั้งแต่พื้นฐาน พร้อมปฏิบัติจริงในรูปแบบหลักสูตรออนไลน์วันนี้
-
ลดราคา!
-
ลดราคา!
-
ลดราคา!
-
ลดราคา!
