Callback and Promise

การเรียกใช้โค้ด Asynchronus แบบชิคๆคุลๆ

สรุปแบบขี้เกียจอ่าน

• Sync ใส่ input เป็น parameter ได้ output ออกมาเป็น return ของ method
• Callbacks ใส่ input และ callback function เป็น parameter ผลลัพธ์จะผ่านมาตอน function ที่ฝากไว้โดนเรียก(จากสวรรค์)
• Promise ใส่ input ได้ output แต่ต้องไปแงะเอาข้อมูลข้างใน output มาใช้เอง

ปล. ไว้เข้าใจ Generator, Async-Await แล้วจะมาอัพเดท

Sync

อันนี้ไม่ใช่ async แต่ใส่มาไว้เปรียบเทียบ ใส่ input แล้วก็เรียก method ได้ output ตรงๆ

function doStuff(input) {
  return "output";
}

let output = doStuff("input");
console.log(output);

Callback

ใส่ input เป็น parameter เหมือนปกติ แต่ใส่ callback method เข้าไปด้วย แต่จะไม่ได้อะไรคืนมาจาก method

output จะผ่านมาเป็น parameter ของ callback ที่ฝากไว้ จะทำอะไรกับ output นั้นก็ต้องใส่ไว้ที่ callback

function doStuff(input, callback) {
  callback("output");
}

let myCallback = (output) => { console.log(output) };

doStuff("input", myCallback);

Promise

ใส่ input เป็น parameter เหมือนปกติ แล้วก็ได้ output ทาง method ซึ่งเหมือนจะโดนหลอกว่าได้ผลลัพธ์ปกติ แต่ต้องไป “แงะ” เอาผลลัพธ์ข้างในออกมาเอง

function doStuff(input) {
  return Promise.resolve("output")
}

let returnedPromise = doStuff("input");

returnedPromise.then( (output) => {console.log(output);} )

อันนี้จะทำให้เหมือนโดนหลอกว่าเป็น synchronous call แต่อย่าลืมว่า มันไม่ได้ block ตรงที่ then นะ มันจะผ่านไปเลย แล้วก็เรียก function ข้างในเมื่อ promise มันพร้อม

Convert Callback to Promise

แปลงได้โดยการเรียกสร้าง promise ที่ไปเรียก method เดิม โดย callback ที่ส่งเข้าไปจะไปเรียก resolve ของ promise เมื่อต้องการจะส่ง output ออกมา

//Original callback accepting method
function doStuff(input, callback) {
  callback("output");
}

function doStuffPromise(input) {
  return new Promise((resolve) => {
    doStuff(input, (output) => { resolve(output); })
  })
}