¿Async Await realmente no bloquea en el navegador?

Posterior a de nuestra larga selección de información pudimos solucionar esta cuestión que suelen tener ciertos de nuestros lectores. Te regalamos la solución y nuestro objetivo es serte de mucha apoyo.

Solución:

await p programa la ejecución del resto de su función cuando promete p resuelve Eso es todo.

async te permite usar await. Eso es (casi) todo lo que hace (también envuelve su resultado en una promesa).

Juntos, hacen que el código sin bloqueo se lea como un código de bloqueo más simple. No desbloquean código.

Para una interfaz de usuario receptiva, descargue el trabajo intensivo de la CPU a un subproceso de trabajo y pásele mensajes:

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));

async es una forma más elegante de estructurar el código asíncrono. No permite nuevas capacidades; es solo una sintaxis mejor que las devoluciones de llamada o las promesas.

Asi que, async no se puede usar para “hacer algo asíncrono”. Si tiene código que tiene que hacer mucho procesamiento basado en CPU, async no va a hacer mágicamente que la interfaz de usuario responda. Lo que tendría que hacer es usar algo como trabajadores web, que son la herramienta adecuada para enviar el trabajo vinculado a la CPU a un subproceso en segundo plano para que la interfaz de usuario responda.

JavaScript es de subproceso único y se ejecuta en el mismo subproceso que la interfaz de usuario. Entonces, todo el código JavaScript bloqueará la interfaz de usuario. Como mencionaron otros trabajadores web, se pueden usar para ejecutar código en otros subprocesos, pero tienen limitaciones.

La diferencia entre las funciones asíncronas y las normales es que devuelven una promesa. Al usar una devolución de llamada, puede aplazar la ejecución del código, que maneja el resultado de la invocación de una función y, por lo tanto, permite que la interfaz de usuario haga algún trabajo. Los siguientes tres ejemplos tienen el mismo efecto:

async function foo() 
  console.log("hi");
  return 1; 

foo().then(result => console.log(result))
console.log("lo");

function foo() 
  console.log("hi");
  return 1; 

Promise.resolve(foo()).then(result => console.log(result))
console.log("lo");

function foo() 
  console.log("hi");
  return 1; 

const result = foo();
setTimeout(() => console.log(result));
console.log("lo");

En los tres casos, la consola registra hi, lo, 1. Antes de que se imprima 1, la interfaz de usuario puede manejar la entrada del usuario o dibujar actualizaciones. La razón 1 que se imprime en último lugar en los dos primeros casos es que las devoluciones de llamadas para promesas no se ejecutan inmediatamente.

await le permite hacer eso sin devoluciones de llamada:

async function foo() 
  console.log("hi");
  return 1; 


async function bar() 
  const result = await foo();
  console.log(result);


bar();
console.log("lo"); 

Eso también imprimirá hola, lo, 1. Al igual que una devolución de llamada para una promesa, el código después await nunca se ejecuta inmediatamente.

---

---

Utiliza Nuestro Buscador