[Javascript] Promise And Callback

เมื่อมีการทำงานเกี่ยวกับ Asynchronous Fuction

Asynchronous Fuction คือ function ที่เราสั่งให้มันทำงานแล้ว ไม่รอให้ทำงานเสร็จก่อน ถึงจะไปทำงานใน function ถัดไป ซึ่งผลลัพธ์ของ function แบบนี้นั้นจะกลับมาด้วยสิ่งที่เราเรียกว่า callback ตัวอย่างเช่น

function sum (num1, num2, callback) {
  setTimeout(function () { callback(num1 + num2); }, 1000);
}

sum(1, 2, function (result) { console.log(result); });

จากโค๊ดข้างบนคือ ผลลัพธ์จะแสดงออกมาหลังจาก 1sec ที่เรียกใช้ function และผลลัพธ์ที่ได้จะกลับมาที่ function(result){ console.log(result) } function นี้จะเรียกว่าเป็น callback function ที่รอผลลัพธ์กลับมาคือ result และแสดงค่าออกมาคือ 3 นั่นเอง แล้วถ้าอยากเอาผลลัพธ์ที่ได้ไปบวกต่อหละ ก้ทำได้โดย

sum(1,2,function(result){
  const myResult = result; // myResult = 3
  sum(myResult,3,function(result){
    console.log(result) // result = 6
  })
})

จากโค๊ดด้านบนจะได้ผลลัพธ์เท่ากับ 6 แต่สังเกตุว่าโค๊ดจะดูค่อนข้างลำบากหากเราต้องการนำผลลัพธ์ที่ได้จาก callback ไปดำเนินการต่อหลายๆครั้ง เช่น

sum(1,2,function(result){
  const myResult = result;
  sum(myResult,3,function(result){
    const myResult = result;
    sum(myResult,4,function(result){
      const myResult = result;
      sum(myResult,5,function(result){
        console.log(result)
      })
    })
  })
})

ดังนั้น Promise จึงถูกสร้างขึ้นมาแก้ปัญหาตรงนี้ เพื่อให้ code ดูง่ายยิ่งขึ้น

function sum (num1, num2,) {
  return new Promise((resolve, reject) => {
     setTimeout(function () { resolve(num1+num2) }, 1000);
  });
}
sum(1, 2).then((result) => {
  return sum(result, 3);
}).then((result) => {
   return  sum(result, 4);
}).then((result) => {
    return  sum(result, 5);
}).then((result) => {
   console.log(result);
});

นั่นแหละฮะท่านผู้ชม ดูง่ายขึ้นเยอะ