ดูต้นฉบับสำหรับ Js-async-await-gemini

'''JavaScript Async/Await: จาก Callback สู่ความทันสมัย.'''  การเขียนโปรแกรมแบบ Asynchronous (อะซิงโครนัส) เป็นหัวใจสำคัญของการทำเว็บแอปพลิเคชันให้ลื่นไหล ในบทความนี้เราจะมาทำความเข้าใจว่าทำไมเราถึงต้องใช้มัน และวิวัฒนาการจากอดีตจนถึงปัจจุบันคือ `async/await`

== ธรรมชาติของ JavaScript: Single-Threaded ==
JavaScript เป็นภาษาแบบ '''Single-Threaded''' หมายความว่ามันมี "สมอง" หรือ Call Stack เพียงอันเดียว ทำงานได้ทีละคำสั่ง (One thing at a time)

สมมติว่าคุณเปิดร้านอาหารตามสั่งที่มีพ่อครัวคนเดียว:

* '''Synchronous (แบบปกติ):''' ลูกค้า A สั่งกะเพรา -> พ่อครัวทำกะเพรา -> ลูกค้า A ได้กิน -> ลูกค้า B สั่งไข่เจียว -> พ่อครัวทำไข่เจียว
** ''ปัญหา:'' ถ้าลูกค้า A สั่งเมนูที่ใช้เวลาทำนานมาก (เช่น ต้มซุป 1 ชั่วโมง) ลูกค้า B จะต้องรอจนกว่าลูกค้า A จะได้ของ ถึงจะเริ่มสั่งได้ ร้านจะค้าง (Blocking)
* '''Asynchronous (แบบไม่รอ):''' ลูกค้า A สั่งซุป -> พ่อครัวรับออเดอร์แล้วตั้งหม้อไว้ (ส่งงานไปทำเบื้องหลัง) -> หันมารับออเดอร์ลูกค้า B ต่อทันที -> พอซุปเสร็จค่อยเสิร์ฟลูกค้า A

ในโปรแกรมจริง งานที่กินเวลานานคือการดึงข้อมูลจาก Server, การอ่านไฟล์, หรือการตั้งเวลา (Timer) ถ้าเราทำแบบ Synchronous หน้าเว็บจะค้าง กดอะไรไม่ได้เลย เราจึงต้องใช้วิธี Asynchronous

== ยุคที่ 1: Callback Hell (นรกของคนรอ) ==
ในสมัยก่อน เราใช้ '''Callback function''' เพื่อบอกว่า "ถ้างานเสร็จแล้ว ให้ทำฟังก์ชันนี้นะ"

; ปัญหา:
เมื่อมีการทำงานต่อกันหลายๆ ขั้นตอน โค้ดจะซ้อนกันลึกเข้าไปเรื่อยๆ จนเป็นรูปทรงพีระมิด หรือที่เรียกว่า '''Callback Hell''' ซึ่งอ่านยากและแก้ไขยากมาก

'''ตัวอย่าง:''' การโหลดข้อมูลผู้ใช้ -> โหลดโพสต์ของผู้ใช้ -> โหลดคอมเมนต์ล่าสุด
<syntaxhighlight lang="javascript">
function getUser(id, callback) {
  setTimeout(() => {
   console.log("ได้ข้อมูลผู้ใช้แล้ว");
   callback({ id: id, name: "Somchai" });
  }, 1000);
}

function getPosts(user, callback) {
  setTimeout(() => {
    console.log("ได้โพสต์ของ " + user.name);
    callback(["Post 1", "Post 2"]);
  }, 1000);
}

function getComments(post, callback) {
  setTimeout(() => {
   console.log("ได้คอมเมนต์ของ " + post);
   callback(["Cool!", "Nice!"]);
  }, 1000);
}

// การเรียกใช้แบบ Callback Hell
getUser(1, function(user) {
  getPosts(user, function(posts) {
    getComments(posts[0], function(comments) {
      console.log("จบการทำงาน: " + comments);
      // ถ้ามี error ต้องดักจับในทุกชั้นเอง
    });
  });
});
</syntaxhighlight>

== ยุคที่ 2: Promise (คำสัญญา) ==
เพื่อแก้ปัญหา Callback Hell จึงเกิด '''Promise''' ขึ้นมาใน ES6 (2015)

Promise คือวัตถุที่แทนค่าที่ "อาจจะมีในอนาคต" (สำเร็จ หรือ ล้มเหลว) ช่วยให้เราเขียนโค้ดเป็นลำดับลงมา (Chain) ด้วย `.then()` ได้ ทำให้โค้ดแบนราบลง

'''ตัวอย่าง:''' แปลงฟังก์ชันข้างบนให้คืนค่าเป็น Promise
<syntaxhighlight lang="javascript">
// สมมติว่าฟังก์ชันเหล่านี้คืนค่าเป็น Promise แล้ว
getUser(1)
  .then(user => {
    return getPosts(user); // ส่งต่อให้ .then ถัดไป
  })
  .then(posts => {
    return getComments(posts[0]);
  })
  .then(comments => {
    console.log("จบการทำงาน: " + comments);
  })
  .catch(error => {
    // ดักจับ error ได้ในจุดเดียว
    console.error(error);
  });
</syntaxhighlight>

ถึงแม้จะดีขึ้น แต่ก็ยังมีวงเล็บและ `.then()` เยอะอยู่ดี ถ้าลอจิกซับซ้อน

== ยุคปัจจุบัน: Async / Await ==
มาถึงพระเอกของเรา **Async/Await** (ES2017) มันคือ "น้ำตาลเคลือบ" (Syntactic Sugar) ของ Promise ที่ช่วยให้เราเขียนโค้ด Asynchronous ให้ดูเหมือนโค้ด Synchronous ปกติ!

* `async`: ใส่หน้า function เพื่อบอกว่าฟังก์ชันนี้จะทำงานแบบ Async และจะคืนค่าเป็น Promise เสมอ
* `await`: ใส่หน้า Promise เพื่อสั่งให้ "หยุดรอ" บรรทัดนี้จนกว่าจะได้ผลลัพธ์ (โดยไม่บล็อกการทำงานส่วนอื่นของโปรแกรมหลัก)

'''ตัวอย่าง:''' การทำงานเดียวกันที่เขียนง่ายที่สุด
<syntaxhighlight lang="javascript">
async function showUserComments() {
  try {
    // โค้ดอ่านง่ายเหมือนบรรทัดต่อบรรทัด
    const user = await getUser(1);
    const posts = await getPosts(user);
    const comments = await getComments(posts[0]);

    console.log("จบการทำงาน: " + comments);
    
  } catch (error) {
    // ใช้ try...catch แบบปกติในการดัก error
    console.error("เกิดข้อผิดพลาด:", error);
  }
}

showUserComments();
</syntaxhighlight>

== ตารางเปรียบเทียบ ==
{| class="wikitable"
! คุณสมบัติ !! Callback !! Promise (.then) !! Async / Await
|-
| '''ความอ่านง่าย''' || ยาก (ซ้อนลึก) || ปานกลาง (Chain ยาว) || ง่ายที่สุด (เหมือนโค้ดปกติ)
|-
| '''การจัดการ Error''' || ต้องเช็คทุกชั้น || ใช้ .catch() || ใช้ try...catch
|-
| '''ลำดับการทำงาน''' || ดูยากเมื่อซับซ้อน || ชัดเจนขึ้น || เป็นธรรมชาติ
|-
| '''Browser Support''' || ทุกรุ่น || เกือบทุกรุ่น || Browser สมัยใหม่ (Modern)
|}

== สรุป ==

1. JavaScript ทำงานแบบ **Single-Threaded**
2. หลีกเลี่ยง **Callback Hell** เพราะดูแลรักษายาก
3. **Promise** ช่วยจัดระเบียบการรอข้อมูล
4. **Async/Await** คือวิธีที่ดีที่สุดในปัจจุบัน ทำให้โค้ดอ่านง่าย สะอาด และจัดการ Error ได้ด้วย `try...catch` ที่คุ้นเคย

ถ้าเริ่มโปรเจกต์ใหม่ หรือเรียนรู้ตอนนี้ ให้โฟกัสที่การใช้ '''Async/Await''' เป็นหลัก

== ตัวอย่างโปรแกรมสำหรับทดลอง ==

: ''ส่วนนี้ไม่ได้เขียนด้วย Gemini แต่มาจาก [[js/async]]''

=== Code เริ่มต้น ===
<syntaxhighlight lang="javascript">
function doSomething(msg) {
  let t = Math.random()*1500;
  setTimeout(() => {
    console.log(msg + "  " + t);
  }, t);
}

console.log("----started----");
doSomething("A         ");
doSomething("  B       ");
doSomething("    C     ");
doSomething("      D   ");
doSomething("        E ");      
console.log("---------------");
</syntaxhighlight>

=== Callback ===
<syntaxhighlight lang="javascript">
function doSomething(msg, callback) {
  let t = Math.random()*1500;
  setTimeout(() => {
    console.log(msg + "  " + t);
    if (callback !== undefined) callback();
  }, t);
}

console.log("----started----");
doSomething("A         ", () => {
  doSomething("  B       ", () => {
    doSomething("    C     ", () => {
      doSomething("      D   ", () => {
        doSomething("        E ");      
      });    
    });  
  });
});
console.log("---------------");
</syntaxhighlight>

=== Promise ===
<syntaxhighlight lang="javascript">
function doSomething(msg) {
  return new Promise((resolve,reject) => {
    let t = Math.random()*1500;
    setTimeout(() => {
      console.log(msg + "  " + t);
      resolve();
    }, t);
  });  
}

console.log("----started----");
doSomething("A         ")
  .then(() => {return doSomething("  B       ")})
  .then(() => {return doSomething("    C     ")})
  .then(() => {return doSomething("       D  ")})
  .then(() => {return doSomething("         E")});
console.log("---------------");
</syntaxhighlight>

=== Async / await ===
<syntaxhighlight lang="javascript">
function doSomething(msg) {
  return new Promise((resolve,reject) => {
    let t = Math.random()*1500;
    setTimeout(() => {
      console.log(msg + "  " + t);
      resolve();
    }, t);
  });  
}

async function main() {
  await doSomething("A         ");
  await doSomething("  B       ");
  await doSomething("    C     ");
  await doSomething("       D  ");
  await doSomething("         E");
  return 10;
}

function main2alternative() {
  return (main()
            .then((x) => { return doSomething(" Z " + x); }));
}

async function main2() {
  let x = await main();
  await doSomething(" Z " + x);
}

async function main3() {
  await main2();
  await doSomething("---------");
}

console.log("----started----");
main3();
console.log("---------------");
</syntaxhighlight>