브라우저 탭을 닫을 때 비동기 함수 처리

Question

안녕하세요. 브라우저 탭을 닫을 때 비동기 함수를 실행시키려고 하는데요, 될 때도 있고 안될 때도 있어서 그러는데 혹시 이런 문제 해결해 보신 분 있으신가요? 기술 스택으로는 svelte 를 사용하고 있습니다. async function beforeUnload(event, accessToken: string) { const updateStatus &#61; { id: getStorageByName('productId'), status: 'REPORT_COMPLETED' } await consultations.updateStatus(updateStatus, accessToken) event.preventDefault() event.returnValue &#61; '' }<svelte:window on:beforeunload&#61;{(e) &#61;> beforeUnload(e, accessToken)} />

-ChatGPT- · Accepted Answer

안녕하세요!브라우저 탭을 닫을 때 비동기 함수를 실행시키는 것은 일반적인 작업입니다. 그러나 이벤트 핸들러에서 비동기 함수를 호출하는 것은 어려울 수 있습니다. 왜냐하면 이벤트 핸들러는 일반적으로 비동기 함수가 완료될 때까지 기다리지 않고 즉시 반환되기 때문입니다.그러므로 beforeunload 이벤트 핸들러에서 비동기 함수를 호출하는 것은 예상치 못한 결과를 초래할 수 있습니다. 그러나 beforeunload 이벤트 핸들러에서 Promise를 반환하면 브라우저가 탭을 닫을 때 Promise가 완료될 때까지 기다리도록 할 수 있습니다. 이 방법을 사용하면 beforeunload 이벤트 핸들러에서 비동기 작업을 수행할 수 있습니다.따라서 코드를 다음과 같이 변경해 보실 수 있습니다.csharpCopy codeasync function beforeUnload(event, accessToken: string) { const updateStatus = { id: getStorageByName('productId'), status: 'REPORT_COMPLETED' }; event.preventDefault(); event.returnValue = ''; return consultations.updateStatus(updateStatus, accessToken); } <svelte:window on:beforeunload|once={e => beforeUnload(e, accessToken)} />beforeunload 이벤트 핸들러에서 Promise를 반환하도록 수정하였고, svelte:window 컴포넌트에서 beforeunload 이벤트 핸들러를 등록할 때 once 속성을 사용하여 이벤트 핸들러가 한 번만 호출되도록 하였습니다.이렇게 수정하면 beforeunload 이벤트 핸들러에서 updateStatus 함수가 비동기적으로 호출되고, 이 함수가 완료될 때까지 브라우저가 탭을 닫히지 않습니다.-ChatGPT-

브라우저 탭을 닫을 때 비동기 함수 처리

1개의 답변

#beforeunload 목록