- บางครั้งมีกรณีที่ต้องการทิ้งล็อกไว้ตอนผู้ใช้ย้ายไปหน้าอื่นหรือส่งฟอร์ม
- การใส่
fetch ไว้ในอีเวนต์คลิกไม่ได้รับประกันว่าจะถูกส่งออกไปแน่นอน
- จึงอาจลองทำเป็น Fetch ก่อนแล้วค่อยย้ายหน้าด้วย
window.location แต่แบบนี้ก็ยังไม่รับประกันเหมือนกัน
- เพราะ XHR เป็นแบบอะซิงก์และไม่บล็อก
- จะใช้
await กับ Promise ของ fetch ก็ได้ แต่ก็มีข้อเสีย
- ความเร็วในการประมวลผลช้าลง ทำให้ประสบการณ์ผู้ใช้ไม่ดี
- ไม่ได้เสถียรอย่างที่คิด เช่น กรณีปิดแท็บเบราว์เซอร์นั้นจัดการไม่ได้
- มีหลายตัวเลือกที่ให้เบราว์เซอร์ช่วยคงคำขอ HTTP ไว้
- ถ้าใช้ keepalive flag กับ Fetch คำขอนั้นจะยังคงอยู่แม้หน้าจะถูกยกเลิกไปแล้ว
- มีฟังก์ชันที่ง่ายกว่านี้อย่าง Navigator.sendBeacon()
- เบราว์เซอร์ยังรองรับ แอตทริบิวต์
ping ของแท็ก a ด้วย (ข้อเสียคือใช้ได้กับลิงก์เท่านั้น และ FF ยังไม่รองรับเป็นค่าเริ่มต้น)
- แล้วควรใช้อะไรดี?
- ถ้าเป็นไปได้ให้ใช้
fetch() + keepalive
- 80% ของเบราว์เซอร์ รองรับ
- ส่ง custom header ได้
- ใช้กับคำขอ GET ได้ด้วย
- รองรับเบราว์เซอร์รุ่นเก่า
- กรณีที่
sendBeacon() เหมาะกว่า คือ
- 96% ของเบราว์เซอร์ รองรับ
- เมื่อต้องการการปรับแต่งไม่มาก
- เมื่อต้องการ API ที่สะอาดและเรียบง่าย
- เมื่อไม่อยากให้ไปแย่งลำดับความสำคัญกับคำขออื่นของเบราว์เซอร์
ยังไม่มีความคิดเห็น