Kiến thức về bất đồng bộ(asynchronous) trong JavaScript

Kiến thức về bất đồng bộ trong JavaScript

Bất đồng bộ (asynchronous) là một khái niệm quan trọng trong lập trình JavaScript. Nó cho phép thực thi các tác vụ song song, không chặn luồng chính của chương trình. Nhờ vậy, giao diện người dùng (UI) có thể phản hồi nhanh hơn và mượt mà hơn.

Có ba cách chính để xử lý bất đồng bộ trong JavaScript:

1. Callback: Đây là cách truyền thống để xử lý bất đồng bộ trong JavaScript. Một hàm callback được truyền vào hàm bất đồng bộ để được thực thi sau khi tác vụ bất đồng bộ hoàn thành.

JavaScript

function loadData(url, callback) {
  // Thực hiện tác vụ bất đồng bộ (ví dụ: tải dữ liệu từ URL)
  // ...

  // Sau khi tác vụ bất đồng bộ hoàn thành, gọi hàm callback
  callback(data);
}

loadData('https://example.com/data.json', function(data) {
  // Xử lý dữ liệu sau khi tải xong
  console.log(data);
});

1. Promise: Promise là một đối tượng JavaScript cung cấp một cách thức hứa hẹn sẽ cung cấp dữ liệu hoặc lỗi trong tương lai. Promise có thể được sử dụng để tạo chuỗi các tác vụ bất đồng bộ.

JavaScript

function loadData(url) {
  return new Promise((resolve, reject) => {
    // Thực hiện tác vụ bất đồng bộ (ví dụ: tải dữ liệu từ URL)
    // ...

    if (success) {
      resolve(data);
    } else {
      reject(error);
    }
  });
}

loadData('https://example.com/data.json')
  .then(data => {
    // Xử lý dữ liệu sau khi tải xong
    console.log(data);
  })
  .catch(error => {
    // Xử lý lỗi
    console.error(error);
  });

Hãy thận trọng khi sử dụng các đoạn mã.content_copy

1. Async/await: Async/await là một cú pháp mới được giới thiệu trong ES2017 để đơn giản hóa việc xử lý Promise. Nó cho phép viết code bất đồng bộ như code đồng bộ.

JavaScript

async function loadData(url) {
  try {
    const response = await fetch(url);
    const data = await response.json();
    return data;
  } catch (error) {
    console.error(error);
  }
}

(async () => {
  const data = await loadData('https://example.com/data.json');
  console.log(data);
})();

Hãy thận trọng khi sử dụng các đoạn mã.content_copy

Lợi ích của lập trình bất đồng bộ:

• Cải thiện hiệu suất: Cho phép thực thi các tác vụ tốn thời gian mà không chặn luồng chính, giúp giao diện người dùng phản hồi nhanh hơn.

• Dễ viết code: Cung cấp các cách thức đơn giản để xử lý các tác vụ bất đồng bộ, giúp code dễ đọc và dễ hiểu hơn.

• Tăng tính linh hoạt: Cho phép tạo các ứng dụng phức tạp với nhiều tác vụ chạy song song.

Ví dụ bài toán thực tế:

Giả sử ta có một trang web bán hàng trực tuyến. Khi người dùng thêm sản phẩm vào giỏ hàng, ta cần cập nhật số lượng sản phẩm trong giỏ hàng hiển thị trên giao diện.

Sử dụng callback:

JavaScript

function addToCart(productId) {
  // Thêm sản phẩm vào giỏ hàng
  // ...

  // Cập nhật số lượng sản phẩm trong giỏ hàng
  updateCartCount();
}

function updateCartCount() {
  // Lấy số lượng sản phẩm trong giỏ hàng
  // ...

  // Hiển thị số lượng sản phẩm trong giỏ hàng
  // ...
}

Sử dụng Promise:

JavaScript

function addToCart(productId) {
  return new Promise((resolve, reject) => {
    // Thêm sản phẩm vào giỏ hàng
    // ...

    if (success) {
      updateCartCount().then(resolve);
    } else {
      reject(error);
    }
  });
}

addToCart('product123')
  .then(() => {
    console.log('Số lượng sản phẩm trong giỏ hàng đã được cập nhật');
  })
  .catch(error => {
    console.error(error);
  });

Sử dụng async/await:

JavaScript

async function addToCart(productId) {
  try {
    // 1. Thêm sản phẩm vào giỏ hàng
    const response = await fetch(`/api/cart/add/${productId}`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ productId }),
    });

    // Kiểm tra response
    if (!response.ok) {
      throw new Error(`Failed to add product: ${response.status}`);
    }

    // 2. Lấy dữ liệu sản phẩm đã thêm
    const productData = await response.json();

    // 3. Cập nhật giao diện người dùng (UI)
    // - Hiển thị thông báo sản phẩm đã được thêm thành công
    // - Cập nhật số lượng sản phẩm trong giỏ hàng
    // - Cập nhật danh sách sản phẩm trong giỏ hàng (nếu cần)

    console.log('Product added successfully:', productData);

  } catch (error) {
    // Xử lý lỗi
    console.error('Error adding product:', error.message);
  }
}