[Javascript] – Phần 69: JavaScript Async/Await

Async/Await là gì?

Async/Await là hai từ khóa trong JavaScript giúp viết code bất đồng bộ dễ dàng hơn.

• async: Dùng trước một hàm để đánh dấu hàm đó là hàm bất đồng bộ. Hàm bất đồng bộ trả về một Promise.
• await: Dùng bên trong hàm bất đồng bộ để đợi một Promise được giải quyết.

Tại sao sử dụng Async/Await?

Trước khi có Async/Await, chúng ta sử dụng callback để viết code bất đồng bộ. Tuy nhiên, callback có thể khiến code khó đọc và khó maintain. Async/Await giúp giải quyết vấn đề này bằng cách sử dụng cú pháp đơn giản và dễ hiểu hơn.

So sánh Async/Await với Callback

Ví dụ 1: Sử dụng callback để lấy dữ liệu từ API

function getData(url, callback) {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', url);
  xhr.onload = function() {
    if (xhr.status === 200) {
      callback(null, xhr.responseText);
    } else {
      callback(new Error('Error fetching data'));
    }
  };
  xhr.send();
}

getData('https://api.example.com/data', function(err, data) {
  if (err) {
    console.error(err);
  } else {
    console.log(data);
  }
});

Ví dụ 2: Sử dụng Async/Await để lấy dữ liệu từ API

async function getData(url) {
  const response = await fetch(url);
  const data = await response.json();
  return data;
}

getData('https://api.example.com/data')
  .then(data => console.log(data))
  .catch(err => console.error(err));

Cú pháp Async/Await

• async function: Hàm bất đồng bộ
• await: Dùng để đợi một Promise được giải quyết. Chỉ có thể sử dụng bên trong hàm async.
• try/catch: Dùng để xử lý lỗi

Ví dụ 3: Sử dụng try/catch để xử lý lỗi

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

Hỗ trợ trình duyệt

Async/Await được hỗ trợ bởi hầu hết các trình duyệt hiện tại.

Kết luận

Async/Await là công cụ mạnh mẽ giúp viết code bất đồng bộ dễ dàng và hiệu quả hơn. Nếu bạn đang viết JavaScript, hãy học và sử dụng Async/Await để cải thiện chất lượng code của bạn.