JavaScript Phase Overview

Promise คืออะไร — ตัวแทนผลลัพธ์ในอนาคต

`Promise` เป็น object ใน JavaScript ที่ใช้ **แทนค่าที่ยังไม่พร้อมใช้ในตอนนี้ แต่จะพร้อมในอนาคต** — เหมือน "สัญญาว่าจะส่งค่ามาให้เมื่อทำงานเสร็จ" แทนที่จะรอผลลัพธ์แบบ blocking (หยุดทุกอย่างจนกว่าจะเสร็จ) Promise บอกว่า "ฉันจะทำงานนี้ให้ แล้วเดี๋ยวค่อยแจ้งผล" — ทำให้โค้ดส่วนอื่นทำงานต่อไปได้ระหว่างรอ Promise มี 3 สถานะสำคัญ: • **pending** — งานยังไม่เสร็จ ยังไม่รู้ผล • **fulfilled** — งานสำเร็จ ได้ค่ากลับมา • **rejected** — งานล้มเหลว มี error เกิดขึ้น ตัวอย่างด้านล่างแสดงให้เห็นว่า Promise ทำงานแบบ async — โค้ดที่อยู่ถัดจาก `.then()` รันทันที ไม่ต้องรอ

const promise = Promise.resolve("สวัสดี");

console.log("1. ก่อน .then()");

promise.then((value) => {
  console.log("3. ใน .then() — ได้ค่า:", value);
});

console.log("2. หลัง .then()");

// ลำดับใน console:
// "1. ก่อน .then()"               ← sync, รันทันที
// "2. หลัง .then()"               ← sync, รันทันที
// "3. ใน .then() — ได้ค่า: สวัสดี"  ← async, รันทีหลัง

• Promise คือ **ตัวแทนของค่าที่จะมาในอนาคต** — ไม่ใช่ค่าจริงตอนที่สร้าง
• 3 สถานะ: `pending` → `fulfilled` (สำเร็จ) หรือ `rejected` (ล้มเหลว)
• `.then()` ใช้ลงทะเบียน callback ที่จะถูกเรียก **หลังจาก** Promise สำเร็จ — ไม่ใช่ตอนที่เขียนโค้ดบรรทัดนั้น
• Promise ทำงานแบบ **non-blocking** — โค้ดข้างล่างรันต่อทันที ไม่ต้องรอ Promise เสร็จ

ทำไมต้องใช้ Promise — ปัญหาที่มันแก้

ก่อนมี Promise การเขียน asynchronous code ใน JavaScript มักใช้ **callback nesting** — ส่ง callback ซ้อน callback เป็นชั้น ๆ จนโค้ดอ่านยากมากและจัดการ error ได้ลำบาก เราเรียกปัญหานี้ว่า `callback hell` Promise แก้ปัญหานี้ด้วยการ **ต่อขั้นตอนเป็น chain** — เขียนจากบนลงล่าง อ่านง่าย และมีระบบจัดการ error ในตัว

// ❌ callback nesting — อ่านจากในออกนอก สับสนง่าย
loadUser((user) => {
  loadOrders(user.id, (orders) => {
    loadDetails(orders[0].id, (details) => {
      console.log(details);
    });
  });
});

// ✅ Promise chain — อ่านจากบนลงล่าง ต่อกันเป็นเส้นตรง
loadUser()
  .then((user) => loadOrders(user.id))
  .then((orders) => loadDetails(orders[0].id))
  .then((details) => console.log(details));

• **อ่านจากบนลงล่าง** — chain ทำให้การไหลของโค้ดตรงกับลำดับการทำงานจริง
• **จัดการ error จุดเดียว** — `.catch()` ท้าย chain จับ error จากทุกขั้นก่อนหน้าได้
• **ส่งค่าต่อได้** — `.then()` แต่ละขั้นคืนค่าใหม่ ส่งต่อไปยัง `.then()` ถัดไป
• **รอพร้อมกันได้** — `Promise.all()` รอหลาย Promise จบพร้อมกัน โดยไม่ต้องซ้อนกัน

ใช้ Promise เมื่อไรในงานจริง

Promise ไม่ได้ถูกใช้แค่ตอนเรียก API — มันเป็น pattern หลักของ JavaScript สำหรับจัดการงานใดก็ตามที่ **ใช้เวลาและไม่อยากให้บล็อก execution อื่น** ตารางด้านล่างช่วยให้เห็นว่าแต่ละสถานการณ์ในงานจริงเชื่อมโยงกับส่วนไหนของ Promise API

• งานจริงของ Promise มักเกี่ยวกับ **รอ**, **ต่อขั้นตอน**, **ดัก error**, **cleanup**, และ **รอพร้อมกัน**
• ถ้างานมีขั้นตอนเดียว → `.then()` + `.catch()` ก็พอ
• ถ้างานมีหลายขั้น → ต่อ chain ด้วย `.then()`
• ถ้างานมีหลายงานที่ไม่ต้องพึ่งกัน → `Promise.all()`

Mental model — 4 ภาพสำคัญที่ควรเห็นก่อนลงบทลูก

ภาพที่สำคัญที่สุดของหัวข้อ Promise คือแยก 4 เรื่องออกจากกันให้ได้: 1. **Promise เป็นกล่อง** — ข้างในอาจยังไม่มีค่าหรือมีแล้วก็ได้ 2. **Promise object กับค่าข้างในไม่ใช่สิ่งเดียวกัน** — ต้องใช้ `.then()` ถึงจะเอาค่าออกมา 3. **`.then()` chain = pipeline แบน** — ไม่ใช่การซ้อน callback แบบพีระมิด 4. **Error ไหลตาม chain อัตโนมัติ** — `.catch()` ท้าย chain จับ error จากทุกขั้นก่อนหน้า ถ้าจำ 4 เรื่องนี้ได้ การเรียนบทลูกจะง่ายขึ้นมาก

ข้อควรระวังระดับ overview ที่ควรรู้ก่อนลงมือ

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

มองภาพรวมแบบง่ายที่สุดคือ Promise มี **2 บทบาทหลัก**: บทบาท **ผู้บริโภค** (ใช้ `.then()`, `.catch()`, `.finally()` กับ Promise ที่มีคนสร้างให้) และบทบาท **ผู้สร้าง** (ใช้ `new Promise()` หรือ wrapper function คืนค่า Promise) — ถ้าแยกสองบทบาทนี้ออกได้ จะสับสนน้อยลงมาก

ใน series นี้มีอะไรบ้าง และควรเริ่มจากไหน

รอบนี้เราแยก `Promises` ออกมาเป็น phase หลักของตัวเอง — 5 บทลูกเรียงลำดับจากพื้นฐานไปสู่การใช้งานจริง แต่ละหน้ามีทั้งเนื้อหาอ่านและแบบฝึกให้ลอง ถ้ายังใหม่กับ Promise แนะนำให้เริ่มจาก `Promise Basics` และไล่ไปตามลำดับ เพราะแต่ละบทต่อยอดจากบทก่อนหน้าโดยตรง

• เริ่มจาก `Promise Basics` เพื่อเข้าใจสถานะของ Promise และ `.then()` — พื้นฐานที่ทุกบทลูกใช้ต่อ
• ต่อด้วย `Creating Promises` เพื่อสร้าง Promise เอง — เข้าใจ `resolve`, `reject`, และ executor
• อ่าน `catch() & finally()` เมื่อต้องจัดการ error, recovery, และ cleanup ในโลกจริง
• เรียน `Promise Chain` เพื่อต่อขั้นตอนเป็น pipeline — จุดที่โค้ดเริ่มอ่านง่ายแบบเส้นตรง
• ปิดท้ายด้วย `Promise.all() & Common Mistakes` — รวมเทคนิครอหลายงานและทบทวนจุดพลาดสำคัญทั้งบท

• เริ่มจากหน้าลำดับแรกไปเรียงตามลำดับ — แต่ละบทต่อยอดจากบทก่อนหน้า
• ถ้าเคยใช้ Promise มาบ้างแล้ว — ข้ามไปบทที่สนใจได้เลย
• กลับมาหน้า overview นี้เมื่ออยากทบทวนภาพรวมว่าแต่ละบทสอนอะไร