Сделать html тег href для ожидания асинхронной c функции в onclick для возврата? - PullRequest
Новая
       3

Сделать html тег href для ожидания асинхронной c функции в onclick для возврата?

1 голос
/ 05 января 2020

У меня есть ссылка с кликом, который должен выполняться до href 

<a class="btn btn-primary" href="?mode=full" onclick="req('name=vmode&value=full','POST','/cookie')">Promeni rezim prikaza</a>

И соответствующие части вызываемой функции js выглядят так: 

function req(data='',method='GET',url='',lang='',el='null'){
    const Http = new XMLHttpRequest();
    Http.open(method,url);

... 

const e = document.getElementById(el);
    if (e && e.value != '' || !e)
        Http.send(msg);

или вернуть false как угодно

Теперь это работает только тогда, когда я установил 

Http.open(method,url,false);

Но я получаю предупреждение из консоли моего браузера о том, как это сделать в основном потоке устарела, и это прямо не позволяет половине моего скрипта работать, даже если я не вызываю эту часть (странно)

Как правильно это сделать? то есть заставить его ждать асин c функция

1 Ответ

1 голос
/ 05 января 2020

Передайте затем event клика для вашей функции: onclick="req(event, 'name=vm....

Тогда ваша функция может event.preventDefault(), так что действие щелчка по умолчанию не выполняется .

Теперь подождите, пока ваш сетевой запрос вернется (возможно, вы захотите использовать fetch(), это намного проще, чем старый XMLHttpRequest).

После обещания решите, инициируйте перенаправление на целевой URL: 

<body>
    <a href="?mode=full" onclick="req(event, 'name=vmode&value=full','POST','/cookie')">Promeni rezim prikaza</a>
</body>
<script>
function req(event, data='',method='GET',url='/index.html?test') {
    console.debug(event);
    event.preventDefault();
    fetch(url, {method: "POST"}).then(() => {
        location.href = event.target.href;
    });
}
</script>

Но учтите, что вашим пользователям, возможно, придется подождать запрос в фоновом режиме и не понять, что происходит.

Если вы хотите отправить только некоторые статистические данные, вы можете рассмотреть возможность использования нового sendBeacon() API. Он отправляет данные (только POST) asyn c в фоновом режиме, так что цель ссылки может быть загружена для пользователя, в то время как браузер работает с sendBeacon() запросами в фоновом режиме.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...