Async / Await

async function

คีย์เวิร์ด async หน้าการประกาศฟังก์ชันทำให้กลายเป็น async function ฟังก์ชัน async คืน Promise เสมอ — แม้คุณจะ return ค่าธรรมดา ค่านั้นจะถูกห่อด้วย Promise.resolve(value) โดยอัตโนมัติ

async function greet() {
  return 'hello';
}

greet().then(function(v) { console.log(v); }); // hello

await

ภายในฟังก์ชัน async await หยุดการทำงานชั่วคราวจนกว่า Promise จะ settle แล้วทำงานต่อด้วยค่าที่ resolve มา ส่วนที่เหลือของโปรแกรมยังทำงานต่อระหว่างที่ await

async function loadUser() {
  var user = await fetchUser(42);   // หยุดตรงนี้จนกว่า fetchUser resolve
  var posts = await fetchPosts(user.id);
  return posts;
}

การจัดการ error

ห่อ expression await ด้วย try/catch เพื่อจัดการการ reject:

async function run() {
  try {
    var data = await fetchData();
    console.log(data);
  } catch (err) {
    console.error('Failed:', err.message);
  }
}

Sequential vs concurrent

การเรียก await สองครั้งแบบเรียงลำดับจะทำงานทีละอัน — อันที่สองเริ่มหลังอันแรกทำเสร็จเท่านั้น:

var a = await fetchA();  // รอ
var b = await fetchB();  // แล้วรออีกครั้ง

หากต้องการรันทั้งสองพร้อมกัน ให้เริ่ม Promise ก่อนแล้ว await พร้อมกัน:

var [a, b] = await Promise.all([fetchA(), fetchB()]);

เดโมที่รันได้

สนิปเป็ตด้านล่างใช้ตัวช่วย fakeFetch (อิง setTimeout) เพื่อจำลองการเรียก async โดยเรียกแบบเรียงลำดับก่อน แล้วเรียกทั้งสองแบบขนานด้วย Promise.all

JavaScript

function fakeFetch(label) {
  return new Promise(function(resolve) {
    setTimeout(function() { resolve(label); }, 0);
  });
}

async function runSequential() {
  var a = await fakeFetch('A');
  var b = await fakeFetch('B');
  console.log('Sequential: ' + a + ' then ' + b);
}

async function runParallel() {
  var results = await Promise.all([fakeFetch('A'), fakeFetch('B')]);
  console.log('Parallel: ' + results[0] + ' and ' + results[1]);
}

async function main() {
  await runSequential();
  await runParallel();
}

main();

ผลลัพธ์: Sequential: A then B, แล้ว Parallel: A and B