让 html 成为标签 href 等待 onclick 中的异步函数返回?

Fil*_*lip 4 html javascript asynchronous

我有一个带有 onclick 的链接,该链接应该在 href 之前执行

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

被调用的js函数的相关部分如下所示:

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

...

const e = document.getElementById(el);
    if (e && e.value != '' || !e)
        Http.send(msg);
Run Code Online (Sandbox Code Playgroud)

或返回 false 无论如何

现在这仅在我设置时才有效

Http.open(method,url,false);
Run Code Online (Sandbox Code Playgroud)

但是我从浏览器的控制台收到警告,关于如何在主线程上执行此操作已被弃用,并且它直接不允许我的一半脚本工作,即使我没有调用该部分(奇怪)

如何正确地做到这一点?即让它等待异步函数

C14*_*14L 5

然后event将点击传递给您的函数:onclick="req(event, 'name=vm....

那么你的函数就可以event.preventDefault()了,这样点击的默认动作就不会被执行。

现在等待您的网络请求返回(可能想要使用fetch(),这比旧的简单得多XMLHttpRequest)。

一旦 Promise 解决,触发重定向到目标 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>
Run Code Online (Sandbox Code Playgroud)

但请考虑到您的用户可能必须在后台等待请求并且不了解发生了什么。

如果您只想发送一些统计数据,您可能需要考虑使用新的sendBeacon()API。POST它在后台(仅)异步发送数据,以便可以为用户加载链接目标,而浏览器sendBeacon()在后台处理请求。