Cách gửi yêu cầu HTTP một cách ổn định khi người dùng rời khỏi trang

• Đôi khi có những trường hợp bạn muốn ghi log khi người dùng chuyển sang trang khác hoặc gửi biểu mẫu
• Việc đặt fetch trong sự kiện click không đảm bảo rằng yêu cầu chắc chắn sẽ được gửi đi
• Vì vậy có thể thử gọi Fetch rồi sau đó chuyển trang bằng window.location, nhưng cách này cũng không được đảm bảo
  • Vì XHR là bất đồng bộ và không chặn
• Có thể xử lý bằng cách await Promise của fetch, nhưng cách này cũng có nhược điểm
  • Tốc độ xử lý chậm hơn nên trải nghiệm người dùng kém đi
  • Không ổn định như mong đợi. Không thể xử lý các trường hợp như đóng tab trình duyệt
• Trình duyệt có nhiều tùy chọn để giữ lại yêu cầu HTTP
  • Nếu dùng cờ keepalive trong Fetch thì ngay cả khi trang bị ngắt, yêu cầu đó vẫn được duy trì
  • Một hàm đơn giản hơn như Navigator.sendBeacon()
  • Các trình duyệt cũng hỗ trợ thuộc tính ping trên thẻ a (nhược điểm là chỉ dùng được cho liên kết, và FF không hỗ trợ mặc định)
• Vậy nên dùng gì?
  • Nếu có thể thì dùng fetch() + keepalive
    • 80% trình duyệt hỗ trợ
    • Có thể gửi header tùy chỉnh
    • Cũng dùng được với yêu cầu GET
    • Hỗ trợ cả các trình duyệt cũ
  • sendBeacon() phù hợp khi
    • 96% trình duyệt hỗ trợ
    • Không cần quá nhiều tùy biến
    • Thích một API gọn gàng và thanh lịch
    • Không muốn cạnh tranh với các yêu cầu ưu tiên khác của trình duyệt