Rate this post

async await là từ khóa trong JavaScript dùng để xử lý các tác vụ bất đồng bộ.

async là từ khóa được sử dụng để khai báo một hàm là một hàm bất đồng bộ. Khi một hàm được khai báo với từ khóa async, nó sẽ trả về một đối tượng “Promise“.

await là từ khóa được sử dụng để chờ cho một “Promise” hoàn thành. Khi một hàm chứa câu lệnh await được gọi, chúng ta có thể chắc chắn rằng hàm sẽ chờ cho “Promise” hoàn thành trước khi tiếp tục thực thi các câu lệnh tiếp theo.

Các bài viết liên quan:

Tại sao phải sử dụng async và await ?

Sử dụng async await trong JavaScript giúp cho việc xử lý các tác vụ bất đồng bộ trở nên dễ dàng hơn và rõ ràng hơn.

Trước khi sử dụng async await, chúng ta thường sử dụng callback function hoặc Promises để xử lý các tác vụ bất đồng bộ. Callback function có thể gây làm cho mã trở nên khó đọc và khó hiểu khi chúng ta cần chờ cho nhiều hàm khác nhau hoàn thành. Promises cũng có thể làm cho mã trở nên khó hiểu khi chúng ta cần chờ cho nhiều Promises hoàn thành trước khi tiếp tục thực thi mã tiếp theo.

Với async và await, chúng ta có thể viết mã giống như mã đồng bộ, nhưng vẫn có thể xử lý các tác vụ bất đồng bộ một cách dễ dàng. Khi chúng ta gọi một hàm bằng await, chúng ta có thể chắc chắn rằng hàm sẽ chờ cho “Promise” hoàn thành trước khi tiếp tục thực thi các câu lệnh tiếp theo. Điều này giúp cho mã trở nên dễ đọc và dễ hiểu hơn, vì chúng ta không cần phải theo dõi các callback hoặc chaining Promises.

Ví dụ:

// Before async/await
fetch('https://api.example.com')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error

Khi nào nên sử dụng async và await ?

async await thường được sử dụng khi bạn cần xử lý các tác vụ bất đồng bộ.

Ví dụ như:

  • Gửi một yêu cầu HTTP để lấy dữ liệu từ một API
  • Đọc hoặc ghi dữ liệu từ một tập tin
  • Xử lý một hàm mã hóa hoặc giải mã
  • Thực thi một hàm tính toán phức tạp

async/await đặc biệt hữu dụng khi bạn cần chờ cho nhiều hàm hoàn thành trước khi tiếp tục thực thi mã tiếp theo.

Điều này giúp cho mã trở nên rõ ràng và dễ hiểu hơn so với sử dụng callback function hoặc chaining promises.

Cần lưu ý, async/await không phải là một giải pháp tốt nhất cho tất cả các trường hợp. Nếu bạn chỉ cần chờ cho một hàm hoàn thành và không cần chờ cho nhiều hàm, sử dụng Promises hoặc callbacks có thể là tốt hơn.

Sử dụng  async và await như thế nào ?

Để sử dụng async và await, bạn cần khai báo một hàm bằng từ khóa async. Sau đó, bạn có thể sử dụng từ khóa await trong hàm đó để chờ cho một “Promise” hoàn thành.

Ví dụ:

async function getData() {
  const response = await fetch('https://api.example.com');
  const data = await response.json();
  console.log(data);
}
getData();

Trong ví dụ trên, hàm getData được khai báo với từ khóa async. Trong hàm, chúng ta sử dụng fetch API để gửi một yêu cầu HTTP để lấy dữ liệu từ một API. Kết quả trả về là một “Promise” để thông tin dữ liệu. Sử dụng await để chờ cho “Promise” đó hoàn thành trước khi tiếp tục chuyển dữ liệu sang JSON và in ra console.

Lưu ý: Chúng ta phải gọi hàm bằng từ khóa await trong một hàm được khai báo với async

Nếu bạn gặp một lỗi trong quá trình chờ cho một “Promise” hoàn thành, bạn có thể sử dụng từ khóa try và catch để xử lý lỗi.

async function getData() {
  try {
    const response = await fetch('https://api.example.com');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.log(error);
  }
}
getData();

Khi bạn sử dụng try/catch để bắt lỗi, bạn có thể xử lý lỗi trong một phạm vi rõ ràng và dễ đọc hơn so với sử dụng Promises và chaining .catch()

Có nhiều cách để sử dụng async/await, nhưng điểm chung là nó giúp ta viết mã bất đồng bộ trông giống như đồng bộ, nhằm giảm độ phức tạp của code và giúp cho việc đọc và hiểu code trở nên dễ dàng hơn.

Bạn có thể tự do sử dụng async/await trong các trường hợp bạn cần xử lý bất đồng bộ. Nhưng cần lưu ý khi sử dụng async/await khi việc xử lý bất đồng bộ có thể gây ra hiện tượng chậm hoặc gặp vấn đề tối ưu hóa nếu không sử dụng một cách chính xác.

Một trường hợp khá thường gặp với async và await. Ví dụ về chạy nhiều tác vụ bất đồng bộ song song và chờ cho chúng hoàn thành trước khi tiếp tục thực thi mã tiếp theo:

async function getData() {
  const response1 = fetch('https://api1.example.com');
  const response2 = fetch('https://api2.example.com');
  const response3 = fetch('https://api3.example.com');
  
  const data1 = await response1.json();
  const data2 = await response2.json();
  const data3 = await response3.json();

  console.log(data1, data2, data3);
}

trong ví dụ trên, chúng ta sử dụng fetch để gọi 3 API song song, sau đó dùng await để chờ cho tất cả 3 “Promise” hoàn thành trước khi tiếp tục in ra data của chúng.

Ví dụ về viết mã bất đồng bộ mà vẫn giữ được cấu trúc đồng bộ của mã:

async function processData(data) {
  const processedData = await heavyProcessing(data); // heavyProcessing is an async function 
  return processedData;
}

// Usage
const data = getData(); // returns a promise
const processedData = await processData(data);
console.log(processedData);

trong ví dụ trên chúng ta sử dụng async function để xử lý dữ liệu bằng cách sử dụng hàm heavyProcessing để xử lý dữ liệu trước, mà vẫn giữ được cấu trúc đồng bộ của mã, giúp cho mã trở nên dễ đọc và dễ hiểu hơn.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Contact Me on Zalo
Call now