I have this link with an onclick that's supposed to execute before the href
<a class="btn btn-primary" href="?mode=full" onclick="req('name=vmode&value=full','POST','/cookie')">Promeni rezim prikaza</a>
And the relevant parts of the called js function looks like this:
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);
or return false whatever
Now this only works when I set
Http.open(method,url,false);
But I get warned from my browser's console about how doing this on the main thread is deprecated and it straight up doesn't allow half of my script to work even if I'm not calling that part(weird)
How does one properly do this? i.e make it await the async function
I have this link with an onclick that's supposed to execute before the href
<a class="btn btn-primary" href="?mode=full" onclick="req('name=vmode&value=full','POST','/cookie')">Promeni rezim prikaza</a>
And the relevant parts of the called js function looks like this:
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);
or return false whatever
Now this only works when I set
Http.open(method,url,false);
But I get warned from my browser's console about how doing this on the main thread is deprecated and it straight up doesn't allow half of my script to work even if I'm not calling that part(weird)
How does one properly do this? i.e make it await the async function
Share Improve this question edited Mar 12, 2020 at 9:32 J.Paravicini 8921 gold badge12 silver badges42 bronze badges asked Jan 5, 2020 at 18:52 FilipFilip 1821 silver badge15 bronze badges 2- Why would async questions be "cringe"? – Roope Commented Jan 5, 2020 at 18:59
- Maybe because people keep asking them and none understands async, "agh that async", but even if so, you're right, there's no dumb questions as long as I couldn't easily find what I needed with a search – Filip Commented Jan 6, 2020 at 1:07
2 Answers
Reset to default 5Pass then event of the click to your function: onclick="req(event, 'name=vm....
Then your function can event.preventDefault() it, so that the default action of the click is not executed.
Now wait for your network request to return (probably want to use fetch(), that's much simpler than the old XMLHttpRequest).
Once the promise resolved, trigger the redirect to the target 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>
But consider that your users may have to wait for the request in the background and don't understand what is going on.
If you only want to send some statistics data, you may want to consider using the new sendBeacon() API. It sends data (POST only) async in the background, so that the link target can be loaded for the user, while the browser works on the sendBeacon() requests in the background.
Without modifying the function itself:
onclick="(async () => { await req('name=vmode&value=full','POST','/cookie'); window.location.href = this.href; })()"