Siêu Năng Lực Bất Đồng Bộ của JavaScript: Event Loop & Promises

Lê Lân

19/06/2025

JavaScript’s Async Superpower: Vòng Lặp Sự Kiện và Promise

Mở Đầu

Bạn đã bao giờ đặt món ăn tại nhà hàng và tự hỏi làm sao bếp có thể xử lý nhiều đơn hàng cùng lúc chưa? JavaScript cũng hoạt động tương tự như người bếp ấy — theo cách cực kỳ hiệu quả và linh hoạt.

Trong thế giới lập trình web, khả năng xử lý các tác vụ bất đồng bộ (asynchronous) mà không làm chậm trải nghiệm người dùng là điều rất quan trọng. JavaScript là ngôn ngữ đơn luồng (single-threaded) nhưng vẫn làm tốt việc này nhờ vòng lặp sự kiện (event loop) và Promises. Bài viết này sẽ giúp bạn hiểu rõ cách thức hoạt động của chúng, từ đó lập trình hiệu quả hơn với async trong JavaScript.

Bạn sẽ được khám phá:

Vòng lặp sự kiện trong JavaScript là gì và hoạt động ra sao.

Cách Promises giải quyết vấn đề "callback hell".

Cách sử dụng và chuỗi hóa (chaining) Promise.

Các phương thức Promise tiện dụng khi làm việc với nhiều async task cùng lúc.

Vòng Lặp Sự Kiện Trong JavaScript Là Gì?

JavaScript chạy trên một luồng duy nhất, nghĩa là nó chỉ thực thi từng đoạn code lần lượt tại một thời điểm. Tuy nhiên, nhờ vòng lặp sự kiện, JavaScript vẫn có thể xử lý nhiều tác vụ một cách linh hoạt và hiệu quả.

Hiểu Vòng Lặp Sự Kiện Qua Ví Dụ

Giống như đầu bếp chuẩn bị món ăn từng bước một nhưng không ngồi đợi món trước chín hẳn mới làm món tiếp theo. Khi lò nướng đang làm bánh pizza, đầu bếp sẽ tranh thủ xử lý món khác. Vòng lặp sự kiện giúp JavaScript tương tự như vậy trong xử lý các tác vụ đồng thời.

🚦 Cách Thức Hoạt Động Của Vòng Lặp Sự Kiện

Các Thành Phần Cốt Lõi

Call Stack (Ngăn xếp lời gọi) Thực thi mã đồng bộ theo thứ tự, chạy từng lệnh một.

Web APIs (Xử lý bất đồng bộ) Các API như setTimeout , fetch , sự kiện người dùng được thực hiện bên ngoài call stack.

Callback Queue (Hàng đợi Macrotask) Khi async task hoàn thành, callback được đẩy vào hàng đợi này.

Microtask Queue (Ưu tiên cao hơn) Bao gồm callbacks của Promises, được xử lý trước macrotasks.

Event Loop Liên tục kiểm tra call stack; nếu rỗng, lấy callback từ microtask queue rồi đến macrotask queue để chạy.

Minh Họa Bằng Mã Nguồn

console.log('Start');

setTimeout(() => {
  console.log('Timeout Callback');
}, 0);

Promise.resolve().then(() => {
  console.log('Promise Callback');
});

console.log('End');

Dự Kiến Kết Quả

Start
End
Promise Callback
Timeout Callback

Điều quan trọng là Microtask Queue (Promise) luôn được thực thi trước Macrotask Queue ( setTimeout ) dù thời gian setTimeout là 0ms.

Promise Trong JavaScript: Hoạt Động và Ý Nghĩa

Từ Callback Hell đến Promises

Trước khi Promises xuất hiện, việc xử lý các tác vụ async thường dùng callbacks, dẫn đến code khó đọc và bảo trì — còn gọi là callback hell.

🏗 Cách Tạo Promise

const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Data received!');
    }, 2000);
  });
};

fetchData().then(response => console.log(response));

Giải thích: hàm fetchData trả về một Promise sẽ được hoàn thành (resolved) sau 2 giây. .then() xử lý kết quả khi Promise hoàn thành.

🔁 Chaining Promises – Chuỗi Hóa Promises

Bạn có thể tiếp tục các bước bất đồng bộ theo chuỗi:

fetchData()
  .then(data => {
    console.log(data);
    return 'Next step';
  })
  .then(step => console.log(step));

Mỗi .then() trả về một Promise mới cho phép thực thi tuần tự các async task một cách rõ ràng.

Các Phương Thức Promise Quan Trọng

Khi xử lý nhiều Promise cùng lúc, JavaScript cung cấp các phương thức tiện ích giúp tối ưu hiệu năng và quản lý lỗi:

Phương Thức	Mục Đích	Ví Dụ Kết Quả
`Promise.all()`	Chạy song song, đợi tất cả hoàn thành	Trả về mảng kết quả khi mọi Promise đều thành công
`Promise.race()`	Trả về kết quả Promise đầu tiên hoàn thành	Kết quả của Promise nhanh nhất
`Promise.allSettled()`	Đợi tất cả Promise hoàn thành, bất kể success hay failure	Trả về trạng thái tất cả Promise
`Promise.any()`	Trả về Promise thành công đầu tiên, bỏ qua Promise lỗi	Nhận kết quả Promise thành công đầu tiên

Ví Dụ: Promise.all()

const p1 = Promise.resolve('One');
const p2 = new Promise(res => setTimeout(() => res('Two'), 2000));
const p3 = new Promise(res => setTimeout(() => res('Three'), 1000));

Promise.all([p1, p2, p3]).then(values => console.log(values));
// ['One', 'Two', 'Three'] sau 2 giây

Tổng Kết Những Điều Quan Trọng

Vòng lặp sự kiện giúp JavaScript xử lý tác vụ async mà vẫn giữ được tính đơn luồng.

Microtask queue chứa Promise callbacks luôn được ưu tiên hơn macrotask queue như setTimeout .

Promises thay thế cách dùng callback truyền thống, làm code async rõ ràng và dễ quản lý hơn.

Các phương thức Promise (all, race, allSettled, any) giúp bạn kiểm soát các tác vụ bất đồng bộ song song hiệu quả.

Hiểu và áp dụng đúng vòng lặp sự kiện cũng như Promises là chìa khóa để xử lý async code mượt mà, dễ gỡ lỗi và tối ưu hiệu suất.

🚀 Bước tiếp theo nên tìm hiểu: Async/Await — cú pháp hiện đại giúp viết code async dễ đọc như sync!

Tham Khảo

MDN Web Docs - Event Loop

MDN Web Docs - Promise

Jake Archibald - Tasks, microtasks, queues and schedules

JavaScript.info - Promises, async/await

Kyle Simpson - You Don’t Know JS: Async & Performance