JavaScript Asynchronous Programming - การใช้ .then() และ .catch() ใน Promises

## การโปรแกรมแบบ Asynchronous ใน JavaScript: การใช้ .then() และ .catch() ใน Promises

JavaScript เป็นภาษาการโปรแกรมที่มีความนิยมอย่างแพร่หลายในการพัฒนาเว็บและแอปพลิเคชันต่าง ๆ เนื่องจากเป็นภาษาที่เรียบง่ายและมีความยืดหยุ่นสูง แต่ข้อจำกัดอย่างหนึ่งของ JavaScript คือการทำงานแบบ Single-threaded ซึ่งหมายความว่าคำสั่งต่าง ๆ จะถูกดำเนินการทีละบรรทัดตามลำดับ ซึ่งอาจเกิดปัญหาเมื่อมีงานที่ต้องใช้เวลา เช่น การเรียกข้อมูลจากเซิร์ฟเวอร์หรือการอ่านไฟล์ขนาดใหญ่ การรอให้คำสั่งเหล่านั้นเสร็จสิ้นก่อนที่จะทำงานอื่น ๆ ต่ออาจทำให้แอปพลิเคชันหยุดนิ่งหรือช้าลง

การโปรแกรมแบบ Asynchronous ใน JavaScript จึงเป็นสิ่งสำคัญในการแก้ไขปัญหานี้ โดยหนึ่งในวิธีที่นิยมใช้คือการใช้ Promises ซึ่งจะช่วยให้สามารถจัดการกับงานที่ใช้เวลานานได้อย่างมีประสิทธิภาพและไม่มีคำสั่งหยุดชะงัก

Promises คืออะไร?

Promises คือวัตถุใน JavaScript ที่แทนค่าการทำงานแบบ Asynchronous ซึ่งสามารถมีสถานะได้สามแบบ คือ

Promises ถูกสร้างขึ้นมาเพื่อให้สามารถติดตามและจัดการผลลัพธ์ของงานที่ทำแบบ Asynchronous ได้อย่างมีระบบ โดยเมื่อคำสั่งเสร็จสิ้นแล้ว จะเข้าสู่สถานะ Fulfilled หรือ Rejected ซึ่งเราสามารถจัดการผลลัพธ์หรือข้อผิดพลาดเหล่านั้นได้ด้วย `.then()` และ `.catch()`

การใช้งาน .then() ใน Promises

`.then()` ถูกใช้เพื่อรับผลลัพธ์จาก Promises ที่เสร็จสมบูรณ์หรือมีสถานะเป็น Fulfilled เมื่อ Promises เสร็จสิ้น เราสามารถกำหนดคำสั่งหรือฟังก์ชันที่ต้องการให้ทำหลังจากนั้นผ่าน `.then()`

let promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("สำเร็จแล้ว!");
    }, 2000);
});

promise.then((result) => {
    console.log(result); // ผลลัพธ์: สำเร็จแล้ว!
});

ในตัวอย่างด้านบน เราใช้ `setTimeout` เพื่อจำลองงานที่ใช้เวลาในการดำเนินการ โดยหลังจาก 2 วินาที สถานะของ Promise จะเปลี่ยนเป็น Fulfilled และ .then() จะถูกเรียกเพื่อนำผลลัพธ์ "สำเร็จแล้ว!" ไปใช้

การใช้งาน .catch() ใน Promises

`.catch()` ใช้เพื่อจัดการกับข้อผิดพลาดหรือสถานะ Rejected ที่เกิดขึ้นจาก Promises เมื่อมีปัญหาในการดำเนินงาน Promises จะเปลี่ยนสถานะเป็น Rejected และเราสามารถจัดการข้อผิดพลาดเหล่านั้นด้วย `.catch()`

let promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        reject("เกิดข้อผิดพลาด!");
    }, 2000);
});

promise
    .then((result) => {
        console.log(result);
    })
    .catch((error) => {
        console.error(error); // ผลลัพธ์: เกิดข้อผิดพลาด!
    });

จากตัวอย่างนี้ เมื่อ `setTimeout` เสร็จสิ้น Promise จะมีสถานะเป็น Rejected และข้อความ "เกิดข้อผิดพลาด!" จะถูกแสดงผ่าน `.catch()`

การใช้งาน .then() และ .catch() ร่วมกัน

เราอาจพบสถานการณ์ที่ต้องการทั้งจัดการผลลัพธ์ที่สำเร็จและข้อผิดพลาดในโค้ดเดียวกัน การใช้งาน `.then()` และ `.catch()` ร่วมกันช่วยให้จัดการสถานการณ์ได้อย่างมีระเบียบและประหยัดเวลา

let fetchData = new Promise((resolve, reject) => {
    let condition = true; // เปลี่ยนเป็น false เพื่อดูผลลัพธ์
    if (condition) {
        resolve("ข้อมูลถูกดึงสำเร็จ");
    } else {
        reject("ไม่สามารถดึงข้อมูลได้");
    }
});

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

ในตัวอย่างนี้ เราใช้คำสั่ง `if` เพื่อตรวจสอบเงื่อนไขและเปลี่ยนสถานะของ Promises ให้เป็น Fulfilled หรือ Rejected โดยใช้ `.then()` และ `.catch()` เพื่อจัดการผลลัพธ์และข้อผิดพลาดตามลำดับ

ประโยชน์ของการใช้ Promises

การเข้าใจและใช้งาน Promises อย่างมีประสิทธิภาพเป็นสิ่งสำคัญมากในการพัฒนาแอปพลิเคชันที่ซับซ้อน ยิ่งในยุคปัจจุบันที่การติดต่อกับข้อมูลผ่าน API และการทำงานแบบ Asynchronous มีบทบาทสำคัญในการพัฒนาเว็บไซต์และแอปพลิเคชันต่าง ๆ หากคุณต้องการยกระดับทักษะการโปรแกรมของคุณ อย่าลืมนำความรู้ด้าน Promises ไปประยุกต์ใช้ให้เกิดประโยชน์สูงสุด

การเรียนรู้เพิ่มเติมเกี่ยวกับการโปรแกรม Asynchronous เช่นเดียวกับเทคนิคขั้นสูงอื่น ๆ คุณสามารถศึกษาต่อได้ที่สถาบันผู้เชี่ยวชาญด้านการเขียนโปรแกรม Expert-Programming-Tutor (EPT) ที่พร้อมจะมอบความรู้และคำแนะนำที่เป็นประโยชน์ให้กับผู้เรียนในทุกระดับชั้น!

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

หากเจอข้อผิดพลาด หรือต้องการพูดคุย ติดต่อได้ที่ https://m.me/expert.Programming.Tutor/