Async Await

เมื่อวันก่อนมีน้องมาถามเรื่องการเขียนโปรแกรมแบบ asynchronous ครับ ซึ้งในบางครั้งถึงแม้ว่าเราจะสร้าง object ขึ้นมาเป็นเพื่อเป็น asynchronous แต่ในการทำงานบางอย่างมันก็จำเป็นที่จะต้องรอการทำงานอื่น ๆ เพื่อให้การทำงานสามารถทำงานได้อย่างสมบูรณ์ วันนี้เลยจะ มานำเสนอตัวช่วยเพื่อให้สามารถแก้ปัญหาตรงนี้ได้ครับ

async function คือ function ที่มีการทำงานของ Promise เมื่อมีการ return ค่าก็เหมือนกับการ resolve ของ Promise และเมื่อมีการ throws exception ก็คือการ reject ของ Promise ซึ่งมันสามารถที่จะใช้ await เพื่อทำการรอการทำงานของ function ได้ ลองพิจารณาตัวอย่าง code ต่อไปนี้

function resolveAfter2Seconds(x) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(x);
    }, 2000);
  });
}
async function add(x) {
  var a = await resolveAfter2Seconds(20);
  var b = await resolveAfter2Seconds(30);
  return x + a + b;
}

add(10).then(v => {
  console.log(v);  // prints 60 after 4 seconds.
});

จาก code จะเห็นว่ามี function ในการการสร้าง object Promise 1 function คือ resolveAfter2Seconds() ซึ่งทำการ return ค่า x ออกมาเมื่อเวลาผ่านไป 2 วินาที และมี function add() ที่เรียก resolveAfter2Seconds() โดยใช้ await ซึ่งเมื่อทำการเรียกใช้ function add แล้วผลออกมาคือมีการแสดงค่า 60 หลังเวลาผ่านไป 4 วินาที

หมายความว่าเมื่อ function add ถูกเรียกนั้น มันเริ่มการทำงานที่ resolveAfter2Seconds(20) ซึ่งการทำงานในส่วนนี้ใช้เวลา 2 วินาทีจึงจะเสร็จ แล้วจึงทำงานที่ resolveAfter2Seconds(30) ก็ใช้เวลา 2 วินาทีเช่นกัน ผลลัพธ์ของเวลาที่ใช้จึงเป็น 4 วินาที จะเห็นว่ามีการรอการทำงานของกันและกันแล้วนะครับ

ทีนี้เรามาดูวิธีเพิ่ม performance กันดูนะครับ เพื่อการใช้งาน async function อย่างเต็มประสิทธิ์ภาพ

async function add(x) {
  var a = resolveAfter2Seconds(20);
  var b = resolveAfter2Seconds(30);
  return x + await a + await b;
}

add(10).then(v => {
  console.log(v);  // prints 60 after 2 seconds.
});

ทีนี้เราเปลี่ยนที่วาง await ให้มาทำพร้อมกันตอน return ค่าจาก function add() ทำให้เวลาในการทำงานเหลือเพียง 2 วินาที

สรุป

ตอนนี้เราก็สามารถแก้ปัญหาการรอเวลาเขียน asynchronous program ได้แล้วนะครับ หวังว่าเพื่อนจะสามารถใช้งาน javascript ได้ง่ายขึ้นครับ

สามารถอ่านบทความที่หน้าสนใจอื่น ๆ ได้ที่ https://konoesite.com/

ที่มา
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function