47P by xguru 4달전 | favorite | 댓글과 토론
  • 가끔 사용자가 다른 페이지로 이동하거나, 폼 전송할 때 로그를 남기고 싶은 경우가 있음
  • 클릭 이벤트에 fetch를 넣는 것은 꼭 전송된다는 보장이 없음
  • 그래서 Fetch하고 나서 window.location 에 넣어서 이동해보지만 이것도 마찬가지로 보장 안됨
    • XHR은 비동기 & 넌블록킹 이기 때문
  • fetch를 Promise로 await 처리하면 되긴 하지만 단점이 있음
    • 처리하는 속도가 느려져서 사용자 경험이 안좋아짐
    • 예상처럼 안정적이지 않음. 브라우저 탭을 닫거나 하는 것은 처리 불가능
  • 브라우저에게 HTTP 요청을 보존시키는 옵션이 여러가지 있음
    • Fetch 에 keepalive 플래그를 사용하면 페이지가 중단되더라도 해당 요청은 유지
    • Navigator.sendBeacon() 같은 더 간단한 함수
    • 브라우저들은 a 태그에 ping 속성도 지원 (링크에만 사용가능하다는 게 단점, FF는 기본으로 미지원)
  • 그럼 뭘 써야 할까 ?
    • 가능하면 fetch() + keepalive
      • 80%의 브라우저가 지원
      • 커스텀 헤더 전송 가능
      • GET 요청으로도 가능
      • 예전 브라우저들 지원
    • sendBeacon() 이 좋은 경우는
      • 96%의 브라우저가 지원
      • 많은 커스터마이징이 필요 없을 때
      • 깔끔하고 우아한 API를 선호할 때
      • 브라우저의 다른 우선순위 요청들과 다투고 싶지 않을 때