Is async await truly non-blocking in the browser?
async
is a more elegant way to structure asynchronous code. It doesn't allow any new capabilities; it's just a better syntax than callbacks or promises.
So, async
can't be used to "make something asynchronous". If you have code that has to do lots of CPU-based processing, async
isn't going to magically make the UI responsive. What you'd need to do is use something like web workers, which are the proper tool to push CPU-bound work to a background thread in order to make the UI responsive.
await p
schedules execution of the rest of your function when promise p
resolves. That's all.
async
lets you use await
. That's (almost) all it does (It also wraps your result in a promise).
Together they make non-blocking code read like simpler blocking code. They don't unblock code.
For a responsive UI, offload CPU-intensive work to a worker thread, and pass messages to it:
async function brutePrime(n) {
function work({data}) {
while (true) {
let d = 2;
for (; d < data; d++) {
if (data % d == 0) break;
}
if (d == data) return self.postMessage(data);
data++;
}
}
let b = new Blob(["onmessage =" + work.toString()], {type: "text/javascript"});
let worker = new Worker(URL.createObjectURL(b));
worker.postMessage(n);
return await new Promise(resolve => worker.onmessage = e => resolve(e.data));
}
(async () => {
let n = 700000000;
for (let i = 0; i < 10; i++) {
console.log(n = await brutePrime(n + 1));
}
})().catch(e => console.log(e));