💪Promise, callback, async/await là gì?

Trong lập trình JavaScript, lập trình bất đồng bộ cho phép bạn xử lý các đoạn code cần thời gian để hoàn thành mà không làm chặn luồng chính (main thread). Điều này rất quan trọng cho các tác vụ như lấy dữ liệu từ API hoặc chờ đầu vào của người dùng. Dưới đây là phân tích về Promise, callback và async/await, tất cả đều liên quan đến lập trình bất đồng bộ:

Promise (Lời hứa):

• Được giới thiệu trong ES6 (ECMAScript 2015).

• Đại diện cho việc hoàn thành cuối cùng (hoặc thất bại) của một hoạt động bất đồng bộ.

• Hoạt động như một chỗ trống cho giá trị tương lai.

• Có ba trạng thái: đang chờ (pending), hoàn thành (fulfilled) và bị từ chối (rejected).

• Được sử dụng để xử lý kết quả của hoạt động bất đồng bộ (hoàn thành) hoặc bất kỳ lỗi nào (bị từ chối).

Callback (Hàm gọi lại):

• Là một hàm được truyền làm đối số cho một hàm khác.

• Hàm thứ hai (thường xử lý các hoạt động bất đồng bộ) sẽ gọi hàm callback khi hoạt động hoàn thành.

• Có thể dẫn đến "callback hell" với các hàm callback lồng nhau, làm cho code khó đọc và khó bảo trì.

Async/Await (Không đồng bộ/Đợi chờ) (được giới thiệu trong ES7):

• Cách viết syntactic sugar (cú pháp gọn nhẹ) được xây dựng trên nền tảng Promise.

• Khiến code bất đồng bộ trông giống như đồng bộ hơn (như thể nó đang xảy ra tuần tự).

• Sử dụng các từ khóa async và await.

• Từ khóa async đánh dấu một hàm là bất đồng bộ.

• Từ khóa await tạm dừng thực thi của hàm async cho đến khi một Promise được giải quyết (hoặc bị từ chối).

Đây là một ví dụ để minh họa sự khác biệt:

Sử dụng Callback:

function fetchData(callback) {
  setTimeout(() => {
    const data = { name: "John Doe" };
    callback(data); // Gọi hàm callback với dữ liệu
  }, 1000);
}

fetchData(function(data) {
  console.log("Dữ liệu:", data);
});

Sử dụng Promises:

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = { name: "John Doe" };
      resolve(data); // Giải quyết Promise với dữ liệu
    }, 1000);
  });
}

fetchData()
  .then(data => console.log("Dữ liệu:", data))
  .catch(error => console.error("Lỗi:", error));

Sử dụng Async/Await:

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log("Dữ liệu:", data);
  } catch (error) {
    console.error("Lỗi:", error);
  }
}

fetchData();

Tóm tắt:

• Promise cung cấp một cách rõ ràng hơn để xử lý các hoạt động bất đồng bộ so với callback.

• Async/await đơn giản hóa hơn nữa code bất đồng bộ bằng cách khiến nó trông giống đồng bộ hơn.

lựa chọn giữa Promise và async/await phụ thuộc vào sở thích của bạn và độ phức tạp của code bất đồng bộ. Async/await thường được coi là dễ đọc hơn cho các hoạt động bất đồng bộ phức tạp.