JavaScript คือ ตอนที่ 5 : การเขียนโปรแกรมแบบซิงโครนัส (Synchronous) และอะซิงโครนัส (Asynchronous)

14พ.ค. 2023 by รับทำแอพ สบายไอที

ทำความเข้าใจเกี่ยวกับการเขียนโปรแกรมแบบซิงโครนัสและอะซิงโครนัส
JavaScript แบบอะซิงโครนัส: การเรียกกลับ (Callbacks) สัญญา (Promises) และ Async/Await
2.1 การเรียกกลับ (Callbacks)
2.2 สัญญา (Promises)
2.3 Async/Await
JavaScript แบบอะซิงโครนัสในการทำงาน: AJAX, Fetch และ WebSockets

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

1. ทำความเข้าใจเกี่ยวกับการเขียนโปรแกรมแบบซิงโครนัสและอะซิงโครนัส

ในการเขียนโปรแกรมคอมพิวเตอร์ มีโมเดลการดำเนินการหลักๆ สองประเภท: แบบซิงโครนัสและแบบอะซิงโครนัส

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

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

2. JavaScript แบบอะซิงโครนัส: การเรียกกลับ (Callbacks) สัญญา (Promises) และ Async/Await

JavaScript ใช้สามเทคนิคหลักในการจัดการโค้ดแบบอะซิงโครนัส: การเรียกกลับ (Callbacks) สัญญา (Promises) และ async/await

2.1 การเรียกกลับ (Callbacks)

การเรียกกลับเป็นฟังก์ชันที่ส่งเป็นอาร์กิวเมนต์ไปยังฟังก์ชันอื่น ซึ่งช่วยให้ฟังก์ชันสามารถเรียกกลับ (callbacks) ในเวลาที่เหมาะสม ทำให้สามารถดำเนินการแบบอะซิงโครนัสหรือแบบไม่ปิดกั้นได้ การเรียกกลับ (callbacks) เป็นวิธีการแรกสุดที่ใช้ใน JavaScript เพื่อจัดการกับการทำงานแบบอะซิงโครนัส

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

function getUserData(userId, callback) {
    // Simulating data fetch
    setTimeout(function() {
        var userData = 'Data for user ' + userId;
        callback(userData);
    }, 2000);
}

getUserData(123, function(data) {
    console.log(data); // Logs "Data for user 123" after 2 seconds
});

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

2.2 สัญญา (Promises)

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

กลับไปที่ตัวอย่างแอปบนอุปกรณ์เคลื่อนที่ของเรา โดยใช้ Promises กระบวนการดึงข้อมูลจะมีลักษณะดังนี้:

function getUserData(userId) {
    return new Promise(function(resolve, reject) {
        // Simulating data fetch
        setTimeout(function() {
            var userData = 'Data for user ' + userId;
            resolve(userData);
        }, 2000);
    });
}

getUserData(123)
    .then(function(data) {
        console.log(data); // Logs "Data for user 123" after 2 seconds
    })
    .catch(function(error) {
        console.log('Error:', error);
    });

สัญญา (Promises) อนุญาตให้คุณแนบฟังก์ชันการเรียกกลับ (callbacks)สำหรับกรณีสำเร็จ ( then) และล้มเหลว ( catch) ทำให้โค้ดอ่านง่ายขึ้นและให้เหตุผลได้ง่ายขึ้น พวกเขายังมีวิธีการสำหรับการรวมและการผูกมัดสัญญา ทำให้การดำเนินการแบบอะซิงโครนัสที่ซับซ้อนง่ายขึ้นอย่างมาก

อย่างไรก็ตาม แม้จะใช้ Promises แต่ JavaScript แบบอะซิงโครนัสก็ยังจัดการได้ยากเมื่อคุณมีการดำเนินการแบบอะซิงโครนัสหลายรายการที่ต้องประสานงานกัน นี่คือที่ async/await นำมาใช้

2.3 Async/Await

เปิดตัวใน ES2017 async/await เป็น syntactic sugar ที่สร้างขึ้นจาก Promises ที่อนุญาตให้เขียนโค้ดแบบอะซิงโครนัสในรูปแบบซิงโครนัสมากขึ้น ทำให้เข้าใจและจัดการได้ง่ายยิ่งขึ้น

เมื่อใช้async/awaitตัวอย่างการดึงข้อมูลแอปมือถือของเราจะกลายเป็น:

function getUserData(userId) {
    return new Promise(function(resolve, reject) {
        // Simulating data fetch
        setTimeout(function() {
            var userData = 'Data for user ' + userId;
            resolve(userData);
        }, 2000);
    });
}

async function displayUserData() {
    try {
        var data = await getUserData(123);
        console.log(data); // Logs "Data for user 123" after 2 seconds
    } catch (error) {
        console.log('Error:', error);
    }
}

displayUserData();

ในตัวอย่างนี้ async คำหลักทำเครื่องหมายฟังก์ชันเป็นแบบอะซิงโครนัส หมายความว่าคำหลักจะส่งคืนสัญญา (Promises) await สามารถใช้คีย์เวิร์ดได้ภายในฟังก์ชันเท่านั้นและ async ทำให้ JavaScript รอจนกว่า Promise จะตกลงและส่งคืนผลลัพธ์ ถ้าสัญญาถูกปฏิเสธ await นิพจน์จะส่งค่าที่ถูกปฏิเสธ

3. JavaScript แบบอะซิงโครนัสในการทำงาน: AJAX, Fetch และ WebSockets

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

หนึ่งในการใช้งาน JavaScript แบบอะซิงโครนัสที่พบบ่อยที่สุดคือการสร้างคำขอ HTTP ซึ่งเรียกกันทั่วไปว่าการดำเนินการ AJAX (Asynchronous JavaScript และ XML) การดำเนินการเหล่านี้ทำให้เว็บและแอพมือถือสามารถสื่อสารกับเซิร์ฟเวอร์และดึงข้อมูลโดยไม่ต้องโหลดหน้าซ้ำ

ตามจริง XMLHttpRequest วัตถุ (object) ถูกใช้สำหรับ AJAX แต่มี API ที่ซับซ้อนและไม่สนับสนุนสัญญา ทำให้การจัดการข้อผิดพลาดทำได้ยาก เมื่อไม่นานมานี้ Fetch APIมี การเปิดตัวซึ่งมีชุดคุณลักษณะที่มีประสิทธิภาพและยืดหยุ่นมากขึ้น

ตัวอย่างวิธีใช้ Fetch API เพื่อสร้างคำขอ HTTP ในเว็บไซต์หรือแอป

fetch('https://api.example.com/user/123')
    .then(function(response) {
        if (!response.ok) {
            throw new Error('HTTP error ' + response.status);
        }
        return response.json();
    })
    .then(function(user) {
        console.log(user);
    })
    .catch(function(error) {
        console.log('Error:', error);
    });

ในตัวอย่างนี้fetchเริ่มคำขอและส่งคืนสัญญา (Promises) เมื่อคำขอเสร็จสิ้น สัญญาจะได้รับการแก้ไขด้วย Response วัตถุ ซึ่งสามารถใช้เพื่อดึงข้อมูลที่ร้องขอได้

WebSocketsเป็นอีกหนึ่งเทคโนโลยีที่ใช้ JavaScript แบบอะซิงโครนัสอย่างมาก WebSockets ให้การเชื่อมต่อระหว่างไคลเอ็นต์และเซิร์ฟเวอร์ตลอดเวลา ทำให้สามารถสื่อสารสองทางแบบเรียลไทม์ได้ เทคโนโลยีนี้มีความสำคัญอย่างยิ่งสำหรับฟีเจอร์ที่ต้องการการอัปเดตตามเวลาจริง เช่น แอปพลิเคชันแชทหรือการอัปเดตกีฬาสด ทั้งในการทำเว็บและทำแอพมือถือ

Asynchronous JavaScript เป็นรากฐานที่สำคัญของการทำเว็บและทำแอพมือถือสมัยใหม่ พลังในการจัดการการทำงานหลายอย่างพร้อมกันทำให้สามารถทำแอพที่ตอบสนองและเป็นมิตรกับผู้ใช้มากขึ้น ด้วยการทำความเข้าใจและควบคุมการเรียกกลับ (callbacks) สัญญา (promises) async/await และเทคโนโลยีที่สร้างขึ้นจากสิ่งเหล่านั้น คุณจะพร้อมรับมือกับความท้าทายของการทำเว็บและทำแอพมือถือที่ทันสมัย