Tự học JavaScript - Module 9: Lập trình bất đồng bộ (Async/Await) chuyên sâu

Table of contents

1. Vấn đề của Callbacks (Callback Hell)

Trước đây, người ta dùng hàm gọi lại (callbacks) để xử lý các tác vụ này. Nhưng khi có nhiều tác vụ phụ thuộc nhau, code sẽ bị lồng vào nhau rất sâu, cực kỳ khó đọc và bảo trì.

// Callback Hell - Ác mộng của lập trình viên
getData(function(a) {
  getMoreData(a, function(b) {
    getEvenMoreData(b, function(c) {
      console.log(c);
    });
  });
});

2. Giải pháp từ Promises

Để giải quyết Callback Hell, ES6 giới thiệu Promise. Một Promise đại diện cho một giá trị sẽ có trong tương lai. Nó có 3 trạng thái:

• Pending: Đang chờ xử lý.
• Fulfilled: Thành công (trả về kết quả - resolve).
• Rejected: Thất bại (trả về lỗi - reject).

Ví dụ về Promise:

let myPromise = new Promise((resolve, reject) => {
  let success = true;
  if (success) {
    resolve("Thành công rồi!");
  } else {
    reject("Có lỗi xảy ra.");
  }
});

myPromise
  .then(value => console.log(value))
  .catch(error => console.log(error));

3. Async và Await - “Cú pháp đường” (Syntactic Sugar)

Mặc dù Promise rất tốt, nhưng các chuỗi .then() dài vẫn có thể gây rối. ES2017 giới thiệu async và await giúp bạn viết code bất đồng bộ nhìn giống hệt code đồng bộ.

• async: Đứng trước một hàm, ép hàm đó luôn trả về một Promise.
• await: Chỉ dùng được bên trong hàm async, giúp dừng thực thi hàm đó cho đến khi Promise được giải quyết xong.

Ví dụ so sánh:

// Dùng Async/Await - Rất sạch sẽ
async function fetchData() {
  try {
    let response = await fetch("https://api.example.com/data");
    let data = await response.json();
    console.log(data);
  } catch (error) {
    console.log("Lỗi:", error);
  }
}

4. Xử lý lỗi với Try…Catch

Khi dùng Async/Await, bạn không dùng .catch() nữa mà dùng khối try...catch truyền thống. Điều này giúp việc quản lý lỗi trở nên đồng nhất và dễ hiểu hơn.

5. Chạy lệnh song song (Promise.all)

Đôi khi bạn muốn lấy dữ liệu từ 3 nguồn khác nhau cùng một lúc thay vì đợi từng cái một. Hãy dùng Promise.all().

async function loadAll() {
  const [res1, res2] = await Promise.all([
    fetch("url1"),
    fetch("url2")
  ]);
}

Lời kết Module 9

Bất đồng bộ là linh hồn của Web hiện đại. Nếu không có nó, các ứng dụng như Facebook hay Gmail không thể hoạt động mượt mà được.

Trong Module 10, chúng ta sẽ học về DOM (Document Object Model) - cách dùng JavaScript để điều khiển toàn bộ các thành phần hiển thị trên trang web.

Hẹn gặp lại các bạn!