Запретить обновление или выход пользователя во время обработки запроса Axios

Question

Я занимаюсь разработкой веб-приложения, в котором я использую запросы Axios.get.Поскольку Axios асинхронный, я делаю асинхронную функцию и ожидаю axios.all:

 async handleSubmit(){
            const ops=[]
            for(i=0;i<this.state.rowsNumber;i++){ 
                let op = axios.get(myrequest,{headers: {'Content-Type': 'text/xml'}} )
                        ops.push(op);
                }
            let res = await axios.all(ops);
}

Это работает отлично, но myrequest выполняется некоторое время, и я хотел бы предупредить пользователя, если он обновляетили покидает страницу, когда обрабатывается запрос axios.

Как мне поступить?

Спасибо за ваши будущие ответы

Answer 1

Вы можете воспользоваться window.onbeforeunload, в то время как вы не можете полностью запретить пользователю обновление, вы можете уведомить, что запрос находится на рассмотрении:

 window.onbeforeunload = function() {
        return "A XHR request is pending, are you sure you want to leave ?";
    }

Осторожно:

Более поздние веб-браузеры не отображают пользовательское сообщение, поскольку оно считается проблемой безопасности.

Answer 2

Вы можете использовать функцию window.onbeforeunload для получения всплывающего окна с подтверждением, когда пользователь нажимает обновить / закрыть / покинуть браузер.

window.addEventListener("beforeunload", function(event) { ... });

Затем просто удалите прослушиватель, как только Axios завершит работу.

Answer 3

Таким образом вы получите refresh событие.

if (window.performance) {
 if (performance.navigation.type == 1) {
   alert( "Reload page" );
 } else {
   alert( "Not reloaded");
 }
}