Đây là bài 2 trong phần 5 của chuỗi demo “JavaScript thực tế: Dữ liệu, sự kiện và trạng thái”. Cách đọc luồng dữ liệu, tổ chức tương tác và xử lý trạng thái bất đồng bộ trên trình duyệt. Bài viết dùng ví dụ và dữ liệu giả để minh họa; hãy thử trên môi trường riêng trước khi áp dụng vào dự án.
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.
Tình huống lỗi
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.
Chẩn đoán có bằng chứng
Trong bài promise và async/await, hãy cố ý tái hiện tình huống trên ở môi trường thử nghiệm. Mục tiêu là thấy vì sao kết quả sai và thu thập đủ bằng chứng để phân biệt lỗi dữ liệu, lỗi quy tắc và lỗi cấu hình. Không sửa đồng thời nhiều yếu tố vì bạn sẽ khó xác định nguyên nhân.
- Ghi rõ bước thao tác và kết quả mong đợi.
- Thu nhỏ ví dụ đến mức vẫn tái hiện được lỗi.
- Đối chiếu dữ liệu thực với giả định ban đầu.
- Đặt giả thuyết và thay đổi một yếu tố.
- Xác nhận bằng cách tái chạy ví dụ tối thiểu.
Mẫu đối chiếu
async function loadTasks(signal) {
const response = await fetch("/api/tasks", { signal });
if (!response.ok) throw new Error(`HTTP ${response.status}`);
return response.json();
}Kiểm tra sau sửa
- 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
Khi lỗi biến mất, thực hiện lại yêu cầu gốc: 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. Sau đó thử trường hợp đầu vào rỗng hoặc trạng thái chưa được khởi tạo nếu phù hợp. Một bản sửa phải khôi phục hành vi đã định nghĩa, không chỉ làm mất thông báo lỗi.
Ghi chú bàn giao
Viết báo cáo ngắn gồm nguyên nhân, phạm vi ảnh hưởng, thay đổi và cách kiểm chứng. Nếu chưa xác định được nguyên nhân, ghi rõ điều còn chưa biết và phép kiểm tra tiếp theo, không biến giả thuyết thành kết luận.