Hiểu rõ Async Await trong Javascript

Th10 28 2024

Trong Javascript, async và await là hai từ khóa quan trọng giúp xử lý các tác vụ bất đồng bộ (asynchronous operations) một cách dễ dàng và dễ hiểu hơn. Bài viết này sẽ giải thích chi tiết về async và await, cách chúng hoạt động và cách sử dụng chúng để viết code Javascript hiệu quả.

Async: Biến function thành Promise

Từ khóa async được sử dụng trước một function declaration, function expression, hoặc arrow function để tạo ra một async function. Điểm đặc biệt của async function là nó luôn trả về một Promise.

async function getAPI() {
  return 'Dữ liệu từ API';
}

getAPI().then(data => console.log(data)); // In ra: "Dữ liệu từ API"

Trong ví dụ trên, getAPI là một async function. Dù không sử dụng return một Promise rõ ràng, hàm này vẫn trả về một Promise đã được resolve với giá trị là ‘Dữ liệu từ API’.

Await: Dừng lại cho đến khi Promise được xử lý

Await chỉ được sử dụng bên trong async function. Nó được đặt trước một Promise và sẽ “dừng” việc thực thi code của async function cho đến khi Promise đó được xử lý (resolve hoặc reject).

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

Trong ví dụ này, await được sử dụng với fetch (trả về một Promise) và response.json() (cũng trả về một Promise). Code sẽ chờ cho đến khi mỗi Promise này được xử lý rồi mới tiếp tục thực thi dòng tiếp theo.

Lợi ích của Async/Await

Sử dụng async/await mang lại nhiều lợi ích cho việc viết code Javascript bất đồng bộ:

Dễ đọc, dễ hiểu: Code dễ đọc hơn so với sử dụng callback function hoặc Promise chain.
Xử lý lỗi tập trung: Có thể sử dụng try…catch để bắt lỗi từ các async function một cách dễ dàng.
Gỡ rối đơn giản hơn: Debug async/await function đơn giản hơn so với callback hoặc Promise chain.

Khi nào nên sử dụng Async/Await?

Nên sử dụng async/await khi bạn cần xử lý các tác vụ bất đồng bộ như:

Gọi API
Đọc/ghi file
Thực thi các tác vụ tốn thời gian

Async/Await và Promise: Sự kết hợp hoàn hảo

Async/await không thay thế Promise, mà là một cách viết code đơn giản hơn để làm việc với Promise. Bên dưới async/await vẫn là cách hoạt động của Promise.

Ví dụ thực tế

async function getFootballData() {
  try {
    const response = await fetch('https://api.football-data.org/v2/competitions/');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Lỗi khi lấy dữ liệu:', error);
    return null;
  }
}

getFootballData().then(data => {
  if (data) {
    // Xử lý dữ liệu bóng đá
  }
});

Ví dụ này minh họa cách sử dụng async/await để lấy dữ liệu từ API bóng đá. Hàm getFootballData được khai báo với async và sử dụng await để chờ kết quả trả về từ fetch và response.json(). Khối try...catch giúp bắt lỗi trong quá trình gọi API.

Kết luận

Async/await là hai từ khóa mạnh mẽ giúp việc xử lý bất đồng bộ trong Javascript trở nên đơn giản và dễ quản lý hơn. Bằng cách hiểu rõ cách thức hoạt động và lợi ích của chúng, bạn có thể viết code Javascript hiệu quả và dễ bảo trì hơn.

Async Await trong Javascript

Câu hỏi thường gặp

1. Sự khác biệt giữa async/await và Promise là gì?

2. Làm cách nào để xử lý lỗi trong async function?

3. Tôi có thể sử dụng async/await với các thư viện Promise khác không?

4. Async/await có làm chậm hiệu năng ứng dụng của tôi không?

5. Khi nào tôi không nên sử dụng async/await?

Bạn muốn tìm hiểu thêm về Javascript?

Khám phá bài viết về “async parallel vs promise all” để so sánh hai cách xử lý Promise song song phổ biến.

Hãy liên hệ với chúng tôi qua Số Điện Thoại: 0372999888, Email: [email protected] hoặc đến trực tiếp địa chỉ 236 Cầu Giấy, Hà Nội để được tư vấn và hỗ trợ bởi đội ngũ chuyên nghiệp 24/7.

Đăng trongVS