JavaScript là một ngôn ngữ bất đồng bộ, nó có nghĩa là chúng ta có thể điều khiển để chương trình hoạt động như là bất đồng bộ nhưng thực ra về bản chất, các hoạt động vẫn diễn ra tuần tự chứ không phải đồng thời.

Những ngôn ngữ lập trình như C/C++, Java,… để thực thi bất đồng bộ sẽ sử dụng một khái niệm là đa luồng nghĩa là cơ chế nhiều luồng tác vụ cùng thực thi đồng thời, mỗi luồng thực hiện các công việc khác nhau. Nhưng JavaScript lại có nền tảng là đơn luồng, nên không thể thực thi đồng thời, bất đồng bộ theo cách trên. Dưới đây là mô phỏng một tình huống bất đồng bộ Vậy nên để xử lý bất đồng bộ, JavaScript hiện đại đưa ra 2 khái niệm giải quyết vấn đề này là: Callback, Promise và Async/Await.

Async Callback (gọi lại bất đồng bộ)

Async Callback là cách thực thi bất đồng bộ, ví dụ như các yêu cầu nạp dữ liệu từ cơ sở dữ liệu hay gọi API từ phía máy chủ có thể mất nhiều thời gian, thì trong khi chờ phản hồi, JavaScript vẫn tiếp tục thực thi bình thường, còn với yêu cầu bất đồng bộ trên, nó sẽ gọi một hàm để được đưa vào tiếp tục thực thi và xử lý khi có kết quả trả về, hàm này là callback.

Ví dụ:

 // mô phỏng việc lấy dữ liệu từ server, sau 2s mới trả về kết quả (mô phỏng tác vụ bất đồng bộ)
    function fetchData(callback) {
        setTimeout(() => {
            const data = { id: 1, name: "John Doe" };
            callback(null, data);
        }, 2000); // Simulating a 2-second delay
    }

    // Hàm xử lý dữ liệu sau khi lấy được (callback function)
    function handleData(error, data) {
        if (error) {
            console.error("Error fetching data:", error);
        } else {
            console.log("Fetched data:", data);
        }
    }

    console.log("Fetching data...");
    // Gọi hàm fetchData và truyền hàm handleData làm tham số
    fetchData(handleData);

Output:

Fetching data...
Fetched data: { id: 1, name: "John Doe" }

Promise (Lời hứa)

Promise là cách xử lý bất đồng bộ, thay vì gộp tất cả các function phụ thuộc vào một đoạn code, dễ gây ra vấn đề phức tạp khi bảo trì, promise sẽ tách ra.

Một đối tượng Promise nhập 2 tham số là 2 resolve và reject, 2 hàm này chịu trách nhiệm:

• resolve: Được gọi khi một Promise được hoàn thành thành công và trả về giá trị mong đợi.
• reject: Được gọi khi một Promise gặp lỗi hoặc không thể hoàn thành nhiệm vụ và trả về lý do của lỗi.

Ví dụ:

// Tạo một Promise mới
const myPromise = new Promise((resolve, reject) => {
  const success = true; // Thay đổi giá trị này để kiểm tra các trường hợp khác nhau

  if (success) {
    resolve("Promise đã hoàn thành thành công!");
  } else {
    reject("Promise đã gặp lỗi!");
  }
});

// Xử lý Promise bằng .then() và .catch()
myPromise
  .then((result) => {
    console.log(result); // In ra: Promise đã hoàn thành thành công!
  })
  .catch((error) => {
    console.error(error); // In ra: Promise đã gặp lỗi!
  });

Áp dụng Promise với tình huống xử lý callback function phía trên:

 // tạo function trả về Promise để xử lý dữ liệu
    function fetchData() {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                const data = { id: 1, name: "John Doe" };
                resolve(data);
            }, 2000); // Simulating a 2-second delay
        });
    }

    // tạo function để xử lý dữ liệu

    async function handleData() {
        try {
            console.log("Fetching data...");
            const data = await fetchData();
            console.log("Fetched data:", data);
        } catch (error) {
            console.error("Error fetching data:", error);
        }
    }

    // Gọi function handleData

    handleData();