Async/Await trong JavaScript: Bất đồng bộ nhưng dễ đọc

Async/Await là lớp “đường” bọc bên ngoài Promise, cho phép bạn viết code bất đồng bộ trông giống như code đồng bộ.

1. Vấn đề với callback hell

getUser(id, function (user) {
  getOrders(user, function (orders) {
    getOrderDetails(orders[0], function (details) {
      console.log(details);
    });
  });
});

2. Promise cải thiện như thế nào?

getUser(id)
  .then(user => getOrders(user))
  .then(orders => getOrderDetails(orders[0]))
  .then(details => console.log(details))
  .catch(console.error);

3. Async/Await – phiên bản dễ đọc nhất

async function showFirstOrderDetails(id) {
  try {
    const user = await getUser(id);
    const orders = await getOrders(user);
    const details = await getOrderDetails(orders[0]);
    console.log(details);
  } catch (err) {
    console.error(err);
  }
}

4. Chạy song song với Promise.all

async function loadPage() {
  const [user, settings] = await Promise.all([
    fetchUser(),
    fetchSettings()
  ]);

  console.log(user, settings);
}

---

Hiểu Async/Await là chìa khóa để làm việc với API, thao tác I/O và các thao tác bất đồng bộ khác một cách rõ ràng, ít bug hơn.