ฟังก์ชันแบบอะซิงโครนัส (Async Functions) ใน JavaScript

Async Functions ถูกนำเข้ามาใน ES2017 (ES8) เพื่อให้เขียนโค้ด Asynchronous ได้ง่ายขึ้น ใช้คีย์เวิร์ด async ก่อนฟังก์ชัน และ await ภายในเพื่อรอ Promise ให้เสร็จสิ้น ทำให้โค้ดอ่านเหมือน Synchronous Code

ไวยากรณ์พื้นฐาน

async function myFunction() {
    let result = await somePromise();
    return result;
}

// หรือ Arrow Function
const myFunction = async () => {
    let result = await somePromise();
    return result;
};

ตัวอย่าง: ใช้ async/await กับ Promise

<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Async Functions</title>
    <style>
        body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
        .result { font-size: 18px; font-weight: 500; color: blueviolet; }
        button { padding: 8px 16px; margin: 10px 0; cursor: pointer; }
    </style>
</head>
<body>
    <h1>ฟังก์ชันแบบอะซิงโครนัส (Async Functions) ใน JavaScript</h1>
    <div class="result"></div>
    <button class="Btn">เรียกฟังก์ชัน asyncFunc</button>
    <h3>กดปุ่มด้านบนเพื่อเรียกฟังก์ชัน asyncFunc</h3>

    <script>
        let BtnEle = document.querySelector(".Btn");
        let resEle = document.querySelector(".result");
        
        // ฟังก์ชันที่คืนค่า Promise
        function displayText() {
            return new Promise((resolve) => {
                setTimeout(() => {
                    resolve("Hello World จาก Promise!");
                }, 1500);
            });
        }
        
        // Async Function
        async function asyncFunc() {
            resEle.innerHTML = "⏳ กำลังรอ Promise...";
            try {
                let result = await displayText();
                resEle.innerHTML = "✅ " + result;
            } catch (error) {
                resEle.innerHTML = "❌ เกิดข้อผิดพลาด: " + error.message;
            }
        }
        
        BtnEle.addEventListener("click", () => {
            asyncFunc();
        });
    </script>
</body>
</html>

ผลลัพธ์

ก่อนกดปุ่ม: ว่าง
กดปุ่ม: แสดง "⏳ กำลังรอ Promise..."
หลัง 1.5 วินาที: แสดง "✅ Hello World จาก Promise!"

ข้อดีของ Async/Await

• โค้ดอ่านง่าย เรียบร้อย ใกล้เคียง Synchronous Code
• จัดการ Error ได้ง่ายด้วย try/catch ตามปกติ
• Debug ง่ายกว่า Promise Chain (Stack Trace ชัดเจนกว่า)
• หลีกเลี่ยง "Callback Hell" และ "Promise Hell"

ข้อควรระวัง

• await ใช้ได้เฉพาะภายใน async function เท่านั้น
• Async Function เสมอคืนค่า Promise (แม้จะ return ค่าปกติ)
• ไม่ควรใช้ await ในลูปถ้าไม่จำเป็น (ทำให้ช้า) - ใช้ Promise.all() แทน

รันพร้อมกันกับ Promise.all()

async function fetchMultiple() {
    // รอทั้งสอง Promise พร้อมกัน (เร็วกว่า)
    let [users, posts] = await Promise.all([
        fetch("/api/users").then(r => r.json()),
        fetch("/api/posts").then(r => r.json())
    ]);
    return { users, posts };
}

Error Handling

async function safeFetch(url) {
    try {
        let response = await fetch(url);
        if (!response.ok) throw new Error(`HTTP ${response.status}`);
        return await response.json();
    } catch (error) {
        console.error("Fetch failed:", error);
        return null; // หรือ throw ใหม่
    }
}