Bất đồng bộ

JavaScript chạy trên một luồng (một call stack): mỗi lúc chỉ làm một việc. Nếu một việc chạy lâu theo kiểu đồng bộ, mọi thứ khác phải chờ - trang web “đứng hình”. Giải pháp: giao tác vụ chậm (mạng, timer, file) cho môi trường lo, và nhận kết quả sau qua callback - không chặn luồng.

// DONG BO: treo luong cho toi khi xong
console.log("A");
let s = 0;
for (let i = 0; i < 1e9; i++) s += i;   // nang -> moi thu phai cho
console.log("B");

// BAT DONG BO: giao viec cham, khong cho
console.log("C");
setTimeout(() => console.log("D (sau)"), 1000);  // chay o nen
console.log("E");   // in NGAY, khong doi D

• ▸JS đơn luồng: một call stack, mỗi lúc một việc.
• ▸Code đồng bộ chặn luồng tới khi xong → có thể làm “đứng hình”.
• ▸Tác vụ chậm giao cho môi trường + callback khi xong → không chặn.

Callback là hàm bạn truyền vào để được gọi LẠI khi việc hoàn tất. Hợp cho một việc, nhưng lồng nhiều lớp sẽ thành callback hell - khó đọc, khó bắt lỗi.

function taiDuLieu(xong) {          // "xong" la callback
  setTimeout(() => xong("du lieu"), 500);
}
taiDuLieu((kq) => console.log("nhan:", kq));

// Long nhieu lop -> "callback hell":
buoc1(() => {
  buoc2(() => {
    buoc3(() => console.log("xong het"));
  });
});

• ▸Callback = hàm gọi-lại khi tác vụ xong.
• ▸Tốt cho một việc; lồng sâu → khó đọc, khó xử lý lỗi (callback hell).
• ▸Promise và async/await sinh ra để làm phẳng mớ lồng này.

Promise là object đại diện cho một kết quả sẽ có trong tương lai. Nó đi từ pending (đang chờ) sang fulfilled (thành công) hoặc rejected (lỗi). Dùng .then/.catch, và nối chuỗi thay cho lồng:

const p = new Promise((resolve, reject) => {
  setTimeout(() => resolve("OK"), 300);   // xong -> resolve
});

p.then((kq) => console.log(kq))           // "OK"
 .catch((e) => console.log("loi:", e));

// Noi chuoi (thay cho long callback):
taiUser()
  .then((u) => taiBaiViet(u.id))
  .then((bv) => console.log(bv))
  .catch((e) => console.log(e));

• ▸Ba trạng thái: pending → fulfilled (value) hoặc rejected (lỗi).
• ▸.then xử lý thành công; .catch bắt lỗi cho cả chuỗi.
• ▸Mỗi .then trả về một Promise mới → nối chuỗi phẳng, dễ đọc.

async/await là cách viết gọn hơn (syntactic sugar) bọc ngoài Promise. async đánh dấu hàm luôn trả về Promise; await chờ một Promise xong rồi lấy giá trị - đọc tuần tự như code đồng bộ, nhưng vẫn không chặn luồng. Lỗi bắt bằng try/catch:

async function tai() {
  try {
    const u = await taiUser();           // "cho" promise xong
    const bv = await taiBaiViet(u.id);   // tuan tu, de doc
    console.log(bv);
  } catch (e) {
    console.log("loi:", e);              // bat moi loi trong chuoi
  }
}
tai();

• ▸async: hàm luôn trả về Promise. await: chờ Promise xong (không chặn luồng).
• ▸try/catch bắt lỗi y như code đồng bộ.
• ▸Đọc tuần tự, dễ hơn chuỗi .then dài.

Tất cả ráp lại ở event loop. Khi call stack rảnh, nó lấy việc từ hàng đợi để chạy - nhưng theo thứ tự ưu tiên: đồng bộ trước, rồi vét HẾT microtask (Promise.then), cuối cùng mới tới macrotask (setTimeout). Bấm “Bước” để xem thứ tự in ra:

console.log("1");                                // dong bo
setTimeout(() => console.log("2"), 0);           // macrotask
Promise.resolve().then(() => console.log("3"));  // microtask
console.log("4");                                // dong bo

// In ra: 1, 4, 3, 2

1
4
3
2

• ▸Event loop chạy callback từ hàng đợi khi call stack rảnh.
• ▸Thứ tự: đồng bộ → vét hết microtask → một macrotask (rồi lặp lại).
• ▸setTimeout(…, 0) vẫn chạy SAU toàn bộ code đồng bộ và microtask.