瀏覽器刷新的時候,正在進行中的事件結束掉,在刷新瀏覽器的時候做一些操作。
如果是調接口,就不能使用axios封裝的接口,需要使用原生的fetch。
找到公共的文件App.vue
使用window.addEventListener(‘beforeunload’, function (e) {})進行瀏覽器關閉操作的監聽。
具體代碼:
window.addEventListener('beforeunload', function (e) {if (isEdit()) {e.preventDefault();e.returnValue = '您有未保存的數據,請稍后關閉';addCanvasArrData()};const studentsStore = useStudentsStore()const { getLiveId, getIsLiveStutus } = storeToRefs(studentsStore);// 是否直播狀態let isLiveStutus = computed(() => {return getIsLiveStutus.value;})// 如果在直播狀態,刷新瀏覽器,關閉直播if(isLiveStutus.value){fetch(`/request/live/log/${getLiveId.value}`,{method: 'PUT', headers: {'Content-Type': 'application/json','token': localStorage.getItem('token') ? localStorage.getItem('token') : ''},body: JSON.stringify({id: getLiveId.value,liveEndTime: new Date()})});var data = {incident: "END_LIVE_BROADCAST",identityNo: teacherStore.identityNo, // 學校班級唯一標識號liveBroadcastNo: getLiveId.value // 紙筆直播id}ws.send(JSON.stringify(data));fetch(`/request/live/log/${getLiveId.value}`,{method: 'GET', headers: {'Content-Type': 'application/json','token': localStorage.getItem('token') ? localStorage.getItem('token') : ''},});}
});