Promise, Async, Await ของ JS ES6+ ฉบับผอมเพรียว ไม่พูดเยอะ เจ็บคอ แถม RxJS

ขอบคุณรูปจาก Anika Huizinga on Unsplash
  • ใช้ Async, Await เพื่อไม่ต้องใช้ .then() แล้วยังไงล่ะ ไปดู
  • เนื่องจาก Promise resolve ได้แค่ครั้งเดียว ถ้าอยาก resolve หลายครั้ง เช่นข้อมูลแบบ stream ใช้ RxJS เพื่อแก้ปัญหา

สรุปจบ ไปดูโค๊ด

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

ผลลัพธ์การทำงาน
ลองทดสอบรันโค้ดได้เลย

1. Promise

  1. object ของ promise จะสามารถต่อด้วย .then() หรือ .catch() ก็ได้
    - ถ้าทำสำเร็จก็ใช้ .then() (คือค่า ที่ถูก resolve ออกมา ในที่นี้คือ text.toUpperCase())
    - ถ้าทำไม่สำเร็จก็ใช้ .catch() (คือค่า ที่ถูก reject ออกมา )
  2. เมื่อเรียก .then() ค่าของข้อความจะมาใส่มาใน data เราก็สามารถเอา data ไปต้มยำทำแกงอะไรก็ได้ เย้ จบ!

2. Async, Await

เอาโค้ดข้างบนมาแก้ main ใหม่

ก่อนปิดบล็อก

อ่าจบแล้ว? RxJS ล่ะ เอาแค่นี้ก่อน พอรู้ข้อจำกัดของการใช้ Promise แล้ว คราวหน้า เราสามารถไปใช้ RxJS ได้

ของแถม แล้ว Promise มาช่วยแก้ปัญหา Callback Hell ยังไง

อันนี้เอาตัวอย่างมาจาก โปรเจ็ค promise-it-wont-hurt ของ https://nodeschool.io/

แล้วถ้าใช้ Promise ช่วยล่ะ

กราบขอบพระคุณแหล่งที่มาต่างๆ

Software Engineer, using ASP.NET Core, React, TypeScript. Blog at thadaw.com

Software Engineer, using ASP.NET Core, React, TypeScript. Blog at thadaw.com