Bài đọc

Promise và async/await: nền tảng và mô hình tư duy

2 phút đọc

Đây là bài 1 của chương 5: Promise và async/await, thuộc khóa demo JavaScript. Nội dung được dùng để trải nghiệm cấu trúc chương trình học; hãy thực hành trên dữ liệu và môi trường thử nghiệm riêng. Trong dự án xuyên suốt, bạn sẽ xây dựng ứng dụng danh sách công việc có tìm kiếm, lọc và lưu trạng thái trên trình duyệt.

Mục tiêu cụ thể

Async/await tổ chức mã bất đồng bộ dễ đọc, nhưng không tự xử lý lỗi. Fetch chỉ reject với một số lỗi mạng; mã HTTP lỗi vẫn phải kiểm tra qua response.ok.

Hiểu vấn đề trước khi dùng công cụ

Chương này tập trung vào một quyết định cụ thể: Viết bộ tìm kiếm có trạng thái loading, empty, success và error; dùng dữ liệu giả lập nếu chưa có API. Đừng bắt đầu bằng cách chép nguyên ví dụ. Hãy chỉ ra thành phần nào là dữ liệu, thành phần nào là quy tắc và đâu là kết quả quan sát được. Một giải pháp đúng với dữ liệu mẫu vẫn có thể sai khi đầu vào rỗng, kích thước lớn hơn hoặc có hai thao tác xảy ra gần nhau.

Ví dụ tối thiểu

async function loadTasks(signal) {
  const response = await fetch("/api/tasks", { signal });
  if (!response.ok) throw new Error(`HTTP ${response.status}`);
  return response.json();
}

Giới hạn cần hiểu

Gửi nhiều tìm kiếm liên tiếp có thể khiến kết quả cũ ghi đè kết quả mới. Hủy request cũ hoặc kiểm tra mã phiên request trước khi cập nhật giao diện.

Câu hỏi để tự giải thích

Bạn sẽ giải thích promise và async/await cho người mới bằng ví dụ nào?
Phần nào của ví dụ là giả định, phần nào cần kiểm tra bằng thực nghiệm?
Nếu bỏ một điều kiện quan trọng, kết quả sẽ sai ở đâu?

Kết quả cần đạt

Xử lý được HTTP 500
Kết quả cũ không ghi đè truy vấn mới
Loading luôn được kết thúc