Jittat: /* สรุป */

2026-01-08T11:16:57Z

สรุป

Jittat: /* ยุคปัจจุบัน: Async / Await */

2026-01-08T11:16:11Z

ยุคปัจจุบัน: Async / Await

Jittat: สร้างหน้าด้วย "'''JavaScript Async/Await: จาก Callback สู่ความทันสมัย.''' การเขียนโปรแกรมแบบ Asyn..."

2026-01-08T11:15:23Z

สร้างหน้าด้วย "'''JavaScript Async/Await: จาก Callback สู่ความทันสมัย.''' การเขียนโปรแกรมแบบ Asyn..."

หน้าใหม่

'''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>

@@ แถว 119: / แถว 119: @@
 == สรุป ==
-. JavaScript ทำงานแบบ **Single-Threaded**
+* JavaScript ทำงานแบบ '''Single-Threaded'''
-. หลีกเลี่ยง **Callback Hell** เพราะดูแลรักษายาก
+* หลีกเลี่ยง '''Callback Hell''' เพราะดูแลรักษายาก
-. **Promise** ช่วยจัดระเบียบการรอข้อมูล
+* '''Promise''' ช่วยจัดระเบียบการรอข้อมูล
-. **Async/Await** คือวิธีที่ดีที่สุดในปัจจุบัน ทำให้โค้ดอ่านง่าย สะอาด และจัดการ Error ได้ด้วย `try...catch` ที่คุ้นเคย
+* '''Async/Await''' คือวิธีที่ดีที่สุดในปัจจุบัน ทำให้โค้ดอ่านง่าย สะอาด และจัดการ Error ได้ด้วย `try...catch` ที่คุ้นเคย
 ถ้าเริ่มโปรเจกต์ใหม่ หรือเรียนรู้ตอนนี้ ให้โฟกัสที่การใช้ '''Async/Await''' เป็นหลัก

@@ แถว 79: / แถว 79: @@
 == ยุคปัจจุบัน: Async / Await ==
-มาถึงพระเอกของเรา **Async/Await** (ES2017) มันคือ "น้ำตาลเคลือบ" (Syntactic Sugar) ของ Promise ที่ช่วยให้เราเขียนโค้ด Asynchronous ให้ดูเหมือนโค้ด Synchronous ปกติ!
+มาถึง keyword ของเรา '''Async/Await''' (ES2017) มันคือ "น้ำตาลเคลือบ" (Syntactic Sugar) ของ Promise ที่ช่วยให้เราเขียนโค้ด Asynchronous ให้ดูเหมือนโค้ด Synchronous ปกติ!
-* `async`: ใส่หน้า function เพื่อบอกว่าฟังก์ชันนี้จะทำงานแบบ Async และจะคืนค่าเป็น Promise เสมอ
+* <tt>async</tt>: ใส่หน้า function เพื่อบอกว่าฟังก์ชันนี้จะทำงานแบบ Async และจะคืนค่าเป็น Promise เสมอ
-* `await`: ใส่หน้า Promise เพื่อสั่งให้ "หยุดรอ" บรรทัดนี้จนกว่าจะได้ผลลัพธ์ (โดยไม่บล็อกการทำงานส่วนอื่นของโปรแกรมหลัก)
+* <tt>await</tt>: ใส่หน้า Promise เพื่อสั่งให้ "หยุดรอ" บรรทัดนี้จนกว่าจะได้ผลลัพธ์ (โดยไม่บล็อกการทำงานส่วนอื่นของโปรแกรมหลัก)
 '''ตัวอย่าง:''' การทำงานเดียวกันที่เขียนง่ายที่สุด

Js-async-await-gemini - ประวัติรุ่นแก้ไข

Jittat: /* สรุป */

Jittat: /* ยุคปัจจุบัน: Async / Await */

Jittat: สร้างหน้าด้วย "'''JavaScript Async/Await: จาก Callback สู่ความทันสมัย.''' การเขียนโปรแกรมแบบ Asyn..."