Đây là bài 5 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.
Bộ câu hỏi tự kiểm tra
- Vì sao promise và async/await cần được xem xét riêng trong dự án JavaScript?
- Giải thích bằng lời của bạn: 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.
- Phát hiện vấn đề trong tình huống: 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.
- Bạn sẽ giữ bằng chứng gì để chứng minh giải pháp hoạt động?
Tiêu chí chấm
- 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
Bài mở rộng
Bắt đầu từ yêu cầu 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. Thay đổi quy mô, độ dài dữ liệu hoặc thứ tự thao tác. Chọn đúng một biến thể phù hợp với chương rồi dự đoán tác động trước khi thử. Ví dụ là công cụ để hiểu nguyên lý, không phải đáp án duy nhất.
Gợi ý tự đánh giá
- Mức 1: nhắc lại được khái niệm nhưng chưa tự thực hiện.
- Mức 2: tự hoàn thành ví dụ và giải thích các bước.
- Mức 3: xử lý được trường hợp biên và giải thích lựa chọn khác.
Nếu chưa đạt mức 2, quay lại bài thực hành thay vì chỉ đọc đáp án. Khi đã đạt mức 3, ghi lại một cách giải khác và so sánh độ đơn giản, khả năng kiểm chứng và giới hạn của hai phương án.
Lưu bằng chứng
Tạo bảng gồm ca thử, đầu vào, kết quả mong đợi, kết quả thực tế và kết luận. Chỉ đánh dấu hoàn thành sau khi từng tiêu chí có kết quả quan sát được; bài tự kiểm tra này không tự chấm điểm và không cấp chứng chỉ.