Đây là bài 2 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.
Đọc ví dụ theo luồng dữ liệu
Đọc từ đầu vào tới đầu ra. Xác định từng tên, điều kiện và quan hệ phụ thuộc trước khi chạy. Nếu có tên model, bảng hoặc endpoint chưa tồn tại, coi đó là thành phần minh họa cần dựng trong dự án thử nghiệm; đoạn trích không đại diện một ứng dụng hoàn chỉnh.
async function loadTasks(signal) {
const response = await fetch("/api/tasks", { signal });
if (!response.ok) throw new Error(`HTTP ${response.status}`);
return response.json();
}Cách phân tích
- Đánh dấu phần khai báo và phần thực hiện thao tác.
- Dự đoán kết quả với dữ liệu thông thường trước khi chạy.
- Thay đúng một giá trị đầu vào để kiểm tra dự đoán.
- Ghi lại kết quả thực tế, không chỉ thông báo thành công.
Tình huống đối chiế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.
Hãy liên hệ ví dụ với yêu cầu của chương: 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. Chỗ nào có thể dùng lại trực tiếp, chỗ nào phải đổi vì dữ liệu hoặc môi trường khác? Giải thích sự khác biệt đó giúp tránh việc sao chép một mẫu đúng trong bối cảnh này nhưng sai trong bối cảnh khác.
Bài tập đọc hiểu
- Chỉ ra phần nào của ví dụ giúp bảo đảm: xử lý được http 500.
- Chỉ ra phần nào của ví dụ giúp bảo đảm: kết quả cũ không ghi đè truy vấn mới.
- Chỉ ra phần nào của ví dụ giúp bảo đảm: loading luôn được kết thúc.
Nộp lại bản chú thích ngắn, kết quả quan sát và một biến thể đã thử. Nếu ví dụ chưa đủ để đạt một tiêu chí, liệt kê phần cần bổ sung thay vì coi tiêu chí đã tự động được thỏa mãn.