Quay lại danh sách case study
Xử lý vấn đề Race Condition khi gọi API đồng thời
Giải quyết tình trạng dữ liệu hiển thị sai lệch do các request API phản hồi không đúng thứ tự thời gian gửi.
Bối cảnh
Trong một trang quản lý đơn hàng, người dùng liên tục bấm lọc theo các trạng thái khác nhau trong thời gian ngắn, dẫn đến việc request gửi đi trước lại về sau và hiển thị dữ liệu cũ.
Vấn đề cần xử lý
Race condition làm giao diện hiển thị không đồng bộ với lựa chọn mới nhất của người dùng, gây khó chịu và lỗi dữ liệu.
Hướng xử lý đề xuất
Sử dụng AbortController để hủy các request API cũ chưa hoàn thành mỗi khi có request mới được kích hoạt.
Câu trả lời mẫu khi phỏng vấn
Khi gặp bài toán race condition do request bất đồng bộ, em thường sử dụng AbortController trong JavaScript. Mỗi khi user thay đổi bộ lọc, em sẽ gọi abort() trên instance cũ để hủy kết nối HTTP trước đó, đồng thời tạo instance mới cho request hiện tại. Cách này vừa tối ưu băng thông vừa đảm bảo chỉ nhận kết quả của hành động mới nhất.
Trade-off
Tăng độ phức tạp một chút trong việc quản lý vòng đời của request và cần xử lý bắt lỗi ngoại lệ AbortError để tránh làm crash console ứng dụng.
Kết quả kỳ vọng
Loại bỏ hoàn toàn lỗi hiển thị dữ liệu sai lệch do trễ mạng và giảm tải cho backend.
Bài học khi trả lời phỏng vấn
Luôn tính đến trường hợp mạng chậm hoặc người dùng thao tác nhanh khi thiết kế các tính năng tìm kiếm và lọc dữ liệu.