Sử Dụng async & await Trong JavaScript

Giới thiệu

Trong lập trình JavaScript, việc xử lý bất đồng bộ là một phần quan trọng giúp ứng dụng hoạt động mượt mà hơn. Hai từ khóa async và await giúp chúng ta viết mã bất đồng bộ một cách dễ dàng và rõ ràng hơn. Bài viết này sẽ giúp bạn hiểu rõ hơn về cách sử dụng async và await, cũng như các nguyên tắc và thực tiễn tốt nhất khi làm việc với chúng.

async là gì?

Từ khóa async được sử dụng trước một hàm để đảm bảo rằng hàm đó luôn trả về một Promise. Điều này có nghĩa là bất kể nội dung của hàm là gì, nó sẽ luôn trả về một Promise, giúp bạn dễ dàng xử lý các kết quả bất đồng bộ.

Ví dụ sử dụng async

async function greet() {
  return "Xin chào!";
}
greet().then(msg => console.log(msg)); // Kết quả: Xin chào!

await là gì?

Từ khóa await được dùng bên trong một hàm async để tạm dừng việc thực thi của hàm cho đến khi Promise được giải quyết. Điều này giúp bạn làm việc với các thao tác bất đồng bộ như thể chúng là đồng bộ.

Ví dụ sử dụng await

async function fetchData() {
  let promise = new Promise((resolve) => {
    setTimeout(() => resolve("Dữ liệu đã nhận!"), 2000);
  });

  let result = await promise;
  console.log(result); // Kết quả sau 2 giây: Dữ liệu đã nhận!
}
fetchData();

Cách async và await hoạt động cùng nhau

Sử dụng async và await giúp mã bất đồng bộ trông giống như mã đồng bộ, từ đó làm cho nó dễ đọc hơn. Dưới đây là một so sánh giữa việc sử dụng .then() và async/await.

So sánh mã với .then() và async/await

// Sử dụng .then()
fetch("https://jsonplaceholder.typicode.com/posts/1")
  .then(res => res.json())
  .then(data => console.log(data));

// Sử dụng async/await
async function getData() {
  try {
    let res = await fetch("https://jsonplaceholder.typicode.com/posts/1");
    let data = await res.json();
    console.log(data);
  } catch (error) {
    console.log("Lỗi:", error);
  }
}
getData();

Xử lý lỗi với try...catch

Khi làm việc với mã bất đồng bộ, việc xử lý lỗi là rất quan trọng. Bạn có thể sử dụng cấu trúc try...catch để bắt và xử lý lỗi trong các hàm async. Điều này giúp mã của bạn an toàn hơn và dễ bảo trì hơn.

Ví dụ xử lý lỗi

async function getData() {
  try {
    let res = await fetch("https://jsonplaceholder.typicode.com/posts/1");
    let data = await res.json();
    console.log(data);
  } catch (error) {
    console.log("Lỗi:", error);
  }
}
getData();

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

• Khi làm việc với các cuộc gọi API (fetch, Axios).
• Khi bạn muốn mã sạch hơn thay vì sử dụng chuỗi .then().
• Khi việc xử lý lỗi là quan trọng.

Thực hành tốt nhất khi sử dụng async/await

1. Giữ cho hàm ngắn gọn: Tránh việc làm cho hàm của bạn quá dài. Chia nhỏ các hàm lớn thành các hàm nhỏ hơn và có trách nhiệm rõ ràng.
2. Sử dụng try...catch: Luôn luôn bọc mã bất đồng bộ của bạn trong khối try...catch để bắt lỗi.
3. Chỉ sử dụng await khi cần thiết: Tránh việc sử dụng await trong các vòng lặp, điều này có thể làm giảm hiệu suất.

Những cạm bẫy thường gặp

• Quên từ khóa async: Nếu bạn quên sử dụng từ khóa async trước một hàm, bạn sẽ không thể sử dụng await bên trong hàm đó.
• Sử dụng await bên ngoài async: Việc sử dụng await bên ngoài một hàm async sẽ gây ra lỗi.

Mẹo tối ưu hiệu suất

• Hạn chế số lần gọi API: Tối ưu hóa các cuộc gọi API để tránh việc gọi nhiều lần không cần thiết.
• Sử dụng Promise.all: Khi bạn cần chờ nhiều Promise cùng một lúc, hãy sử dụng Promise.all() để cải thiện hiệu suất.

Ví dụ sử dụng Promise.all

async function fetchAllData() {
  try {
    const [data1, data2] = await Promise.all([
      fetch("https://jsonplaceholder.typicode.com/posts/1"),
      fetch("https://jsonplaceholder.typicode.com/posts/2")
    ]);
    const json1 = await data1.json();
    const json2 = await data2.json();
    console.log(json1, json2);
  } catch (error) {
    console.log("Lỗi:", error);
  }
}
fetchAllData();

Kết luận

Việc sử dụng async và await giúp cho mã JavaScript trở nên rõ ràng và dễ đọc hơn khi làm việc với các tác vụ bất đồng bộ. Hãy áp dụng những thực tiễn tốt nhất và tránh những cạm bẫy thường gặp để tối ưu hóa mã của bạn. Đừng ngần ngại thử nghiệm với các ví dụ thực tế và cải thiện kỹ năng lập trình của bạn.

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

1. async và await có tương thích với tất cả các trình duyệt không?
Có, nhưng bạn cần kiểm tra tính tương thích nếu bạn sử dụng tính năng này trong các trình duyệt cũ hơn.

2. Có thể sử dụng await bên ngoài hàm async không?
Không, bạn không thể sử dụng await bên ngoài một hàm async.

3. Làm thế nào để xử lý nhiều Promise cùng lúc?
Sử dụng Promise.all() để xử lý nhiều Promise cùng lúc một cách hiệu quả.