Async/Await trong JavaScript là gì?
Website hiển thị "Đang tải..." mà vẫn không bị đơ? Đó là nhờ lập trình bất đồng bộ (asynchronous). Async/Await là cách hiện đại nhất để viết code bất đồng bộ trong JavaScript.
Bất đồng bộ là gì?
Tưởng tượng đặt đồ ăn tại quán: Đồng bộ = đứng chờ tại bếp cho đến khi xong. Bất đồng bộ = đặt món rồi về ngồi làm việc khác – bếp gọi thì lấy.
JavaScript là single-threaded – cần bất đồng bộ để không làm đơ trang khi chờ API.
Lịch sử: Callback → Promise → Async/Await
Callback – Gây "địa ngục"
getData(function(a) {
getMoreData(a, function(b) {
getEvenMoreData(b, function(c) {
console.log(c); // Callback Hell!
});
});
});
Async/Await – Đẹp nhất, dễ đọc nhất
async function fetchData() {
try {
const response = await fetch("https://api.example.com/data");
const data = await response.json();
console.log(data);
} catch (error) {
console.error("Lỗi:", error);
}
}
Cú pháp Async/Await
async function
async function myFunction() {
return "Xin chào"; // Luôn trả về Promise
}
await – Chờ Promise hoàn thành
async function example() {
const result = await somePromise(); // Dừng lại và chờ
console.log(result); // Chạy sau khi xong
}
Quan trọng: await chỉ dùng được BÊN TRONG async function.
Tìm hiểu thêm: Hàm trong JavaScript
Xử lý lỗi với try/catch
async function fetchUser(id) {
try {
const response = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`);
if (!response.ok) throw new Error(`Lỗi HTTP: ${response.status}`);
return await response.json();
} catch (error) {
console.error("Không thể lấy dữ liệu:", error.message);
return null;
}
}
Ví dụ thực tế: Gọi API JSONPlaceholder
async function getBaiViet() {
try {
const response = await fetch("https://jsonplaceholder.typicode.com/posts");
const posts = await response.json();
posts.slice(0, 5).forEach(post => console.log(`${post.id}. ${post.title}`));
} catch (error) {
console.error("Lỗi khi tải bài viết:", error);
}
}
getBaiViet();
Promise.all – Chạy song song
// Hiệu quả: chạy song song
const [user, posts] = await Promise.all([
fetchUser(1),
fetchPosts()
]);
// Tổng thời gian = thời gian của request chậm nhất
Áp dụng ngay: DOM trong JavaScript để kết hợp async/await với giao diện.
Câu hỏi thường gặp
await có làm đơ trang không? Không. Chỉ tạm dừng bên trong async function đó, UI vẫn hoạt động bình thường.
Async/Await khác Promise thế nào? Async/Await được xây dựng trên Promise – cùng bản chất nhưng cú pháp đẹp hơn, dễ đọc hơn.
