Является ли async await действительно неблокирующим в браузере?

await p планирует выполнение остальной части вашей функции, когда обещание p разрешается. Это все.

async позволяет использовать await. Это (почти) все, что он делает (он также превращает ваш результат в обещание).

Вместе они делают неблокирующий код более простым блокирующим кодом. Они не разблокируют код.

Для гибкого пользовательского интерфейса переложите интенсивную работу процессора на worker thread и передавать в него сообщения:

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 - более элегантный способ структурировать асинхронный код. Не допускает никаких новых возможностей; это просто лучший синтаксис, чем обратные вызовы или обещания.

Итак, async нельзя использовать для «создания чего-то асинхронного». Если у вас есть код, который должен выполнять большую часть обработки на базе ЦП, async не сможет волшебным образом заставить пользовательский интерфейс реагировать. Что вам нужно сделать, так это использовать что-то вроде веб-работников. , которые являются подходящим инструментом для передачи работы, связанной с процессором, в фоновый поток, чтобы пользовательский интерфейс реагировал.

JavaScript является однопоточным и выполняется в том же потоке, что и пользовательский интерфейс. Таким образом, весь код JavaScript блокирует пользовательский интерфейс. Как упоминалось другими, веб-воркеры могут использоваться для запуска кода в других потоках, но у них есть ограничения.

Разница между асинхронными функциями и обычными в том, что они возвращают обещание. Затем с помощью обратного вызова вы можете отложить выполнение кода, который обрабатывает результат вызова функции и тем самым позволяет пользовательскому интерфейсу выполнять некоторую работу. Следующие три примера имеют такой же эффект:

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

Во всех трех случаях консоль регистрирует hi, lo, 1. До того, как будет напечатано 1, пользовательский интерфейс может обрабатывать ввод данных пользователем или рисовать обновления. Причина 1, которая печатается последней в первых двух случаях, заключается в том, что обратные вызовы для обещаний не выполняются немедленно.

await позволяет делать это без обратных вызовов:

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

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

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

Это также напечатает hi, lo, 1. Как и при обратном вызове для обещания, код после await никогда не выполняется немедленно.

Это ясно из описания на developer.mozilla.org что он неблокирующий:

Ключевое слово await заставляет среду выполнения JavaScript приостанавливать ваш код в этой строке, разрешая выполнение другого кода в это время (примечание: выделено жирным шрифтом), пока вызов асинхронной функции не вернет свой результат. Как только это будет завершено, ваш код продолжит выполнение, начиная со следующей строки.

Я опаздываю на вечеринку здесь. Я хотел проверить как синхронные, так и асинхронные варианты использования.

Чтобы было ясно, async / await не создает синхронный код. Он только добавляет syntactic sugar, что делает код синхронным. Под оболочкой логика Promise продолжает реализовывать non-preemptive multitasking.

В примере gist вы можете запустить пример с параметром командной строки, который выбирает блокирующий или неблокирующий ввод CLI. asyncExample.js