Tuanxt

Xử lý bất đồng bộ Asynchronous trong JavaScript

Thứ Tư, 10/04/2024 · 3 phút đọc

Xử lý bất đồng bộ (asynchronous) là một khái niệm quan trọng trong lập trình web, giúp xử lý các tác vụ mà không làm chặn luồng thực thi chính của chương trình. Điều này cho phép các hoạt động như gửi yêu cầu HTTP, đọc/ghi dữ liệu từ cơ sở dữ liệu, và thực hiện các tác vụ khác có thể được thực hiện mà không ảnh hưởng đến sự tương tác của người dùng với trang web/app.

Cơ bản, Xử lý JavaScript bất đồng bộ được thực hiện thông qua việc sử dụng các hàm callback, Promises, và Async/Await. Dưới đây là một số khái niệm chính:

1. Callback Functions:
   • Callbacks là hàm được truyền vào một hàm khác như một đối số để được gọi lại sau khi hoàn thành một tác vụ nào đó.
   • Ví dụ:

function fetchData(callback) {
  setTimeout(() => {
    console.log("Data fetched!");
    callback();
  }, 2000);
}

fetchData(() => {
  console.log("Callback function called.");
});

2. Promises:

• Promises giúp xử lý các tác vụ bất đồng bộ một cách dễ đọc hơn và tránh tình trạng “callback hell”.
• Một Promise có thể ở trạng thái “pending”, “fulfilled” hoặc “rejected”.
• Ví dụ:

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log("Data fetched!");
      resolve();
    }, 2000);
  });
}

fetchData().then(() => {
  console.log("Promise resolved.");
});

3. Async/Await:

• Async/Await là một cú pháp giúp viết mã bất đồng bộ theo kiểu đồng bộ, làm cho nó trở nên dễ hiểu hơn và ít lỗi hơn.
• Hàm được đánh dấu bằng từ khóa async, và việc gọi hàm bất đồng bộ được thực hiện bằng cách sử dụng từ khóa await.
• Ví dụ:

async function fetchData() {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log("Data fetched!");
      resolve();
    }, 2000);
  });
}

async function fetchDataWrapper() {
  console.log("Before fetching data.");
  await fetchData();
  console.log("After fetching data.");
}

fetchDataWrapper();

Những khái niệm trên giúp JavaScript thực hiện các tác vụ bất đồng bộ một cách linh hoạt và hiệu quả, đặc biệt trong môi trường web nơi mà thời gian phản hồi nhanh là quan trọng.

- Ảnh đại diện bài viết -