มารู้จัก Promise กัน

เป็นรูปแบบในการเขียนโค้ดให้อ่านง่ายขึ้นจากแบบเดิมที่เป็น callback function ที่มีการซ้อนไป

เรื่อยเป็นปีรามิด มีชื่อเรียกขานในวงการว่า callback hell ( นรกคอลแบ็ค ) ในการใช้งาน Promise ก็จะ

ช่วยปรับรูปแบบโค้ดให้สบายตามากขึ้น

วิธ๊สร้างคือให้  return new Promise( resolve, reject ) => { code function } ภายในฟังก์ชัน 

จากนั้นจะมีรูปแบบในการคืนค่า 2 แบบ ได้แก่

resolve ทำงานเมื่อฟังก์ชันทำงานถูกต้อง

reject ทำงานเมื่อต้องการ return error

อธิบายเพิ่มเติม => คือ arrow function ใช้ประกาศฟังก์ชันแทนรูปแบบ function(){  } 

เช่น ( resolve, reject ) => {  } ก็มาจาก function( resolve, reject ){  }

ตัวอย่างโค้ด

// ตัวอย่างการสร้างฟังก์ชันแบบ Promise const findx = (text) => {   return new Promise( (resolve, reject) => {       if (text.search('x') > 0) {           resolve('meet x')       }       else {           reject('no x')       }   }) } // ตัวอย่างการนำฟังก์ชันแบบ Promise ไปใช้ findx('text').then( (result) => {   console.log("success1: ", result)   return findx('aaaxaa') }).then( (result) => {   console.log('success2: ', result)   return findx('ccxca') }).then( (result) => {   console.log('success3: ', result)   return findx('aaa') }).catch( (err) => {   console.log('error: ', err) })

output :>>> success1:  meet x success2:  meet x success3:  meet x

จากโค้ดด้านบนสร้างฟังก์ชันทำงานรับข้อความมาแล้วเช็คว่ามี x อยู่ในนั้นหรือไม่  เวลาใช้งาน

เมื่อต้องการให้อีกฟังก์ชั้นหนึ่งทำงานต่อจากฟังก์ชันเราก็ใช้ .then เหมือนกับที่ใช้ callback แบบเดิม

เลย โดยให้ return ฟังก์ชันถัดไปที่ต้องการใช้งาน  ส่วนฟังก์ชันถัดไปที่ถูกใช้งานนั้นให้มีตัวแปร result 

ไว้สำหรับรับข้อมูลผลลัพธ์ของฟังก์ชันที่ทำงานก่อนหน้าด้วย ถ้ามีการ error เกิดขึ้นก็เข้าไปทำงานใน 

.catch โดยแม้ยังมี then อยู่ก่อนหน้าจะถูกข้ามการทำงานไปเลย  จะเห็นได้ว่าโค้ดมีการทำงานเรียงจาก

บนลงล่างทำให้อ่านง่ายขึ้น เข้าใจได้ง่ายขึ้นนั่นเอง  ที่สำคัญให้มี .catch ด้วยนะเพื่อดักจับ error ในการทำงาน