程序员经验分享-hwhale

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

2023-12-26

我有一个带有 onclick 的链接，该链接应该在 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);

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

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


然后通过event点击您的函数：onclick="req(event, 'name=vm....

那么你的函数就可以event.preventDefault() https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault它，这样点击的默认动作就不会被执行。

现在等待您的网络请求返回（可能想要使用fetch() https://developers.google.com/web/updates/2015/03/introduction-to-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>

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

如果您只想发送一些统计数据，您可能需要考虑使用新的sendBeacon() https://developer.mozilla.org/en-US/docs/Web/API/Navigator/sendBeaconAPI。它发送数据（POST only) async在后台，以便可以为用户加载链接目标，而浏览器则在sendBeacon()在后台请求。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

html

Asynchronous

让 html 成为标签 href 等待 onclick 中的异步函数返回？ 的相关文章

随机推荐

热门标签