Асинхронные функции странно работают с обещаниями

Question

Я пытаюсь понять механизм асинхронных функций.Я нашел код на MDN docs MDN docs , внес некоторые изменения и ... не могу полностью понять, как это работает.

var resolveAfter2Seconds = function() {
  console.log("starting slow promise");
  return new Promise(resolve => {
    setTimeout(function() {
      resolve(20);
      console.log("slow promise is done");
    }, 6000);
  });
};


var resolveAfter1Second = function() {
  console.log("starting fast promise");
  return new Promise(resolve => {
    setTimeout(function() {
      resolve(10);
      console.log("fast promise is done");
    }, 4000);
  });
};


var sequentialStart = async function() {
  console.log('==SEQUENTIAL START==');

  const slow = await resolveAfter2Seconds();
  const fast = await resolveAfter1Second();

  console.log(fast);
  console.log('why?');
  console.log(slow);
}


sequentialStart();

На данный момент я знаю, что если мы запустим этот код, мы сразу получим «== SEQUENTIAL START ==» на консоли, а затем «запуск медленного обещания», тогда мы получимОбещание с setTimeout, которое указывает, что «медленное обещание выполнено» появится через 6 секунд, а обратный вызов resol (20) будет сохранен в контейнере api, так как стек выполнения будет пустым. JS дает нам «стартовое быстрое обещание» и через четыре секундымы получаем «быстрое обещание выполнено», а затем сразу 10, «почему?», 20.

Я не понимаю: что именно происходит в фоновом режиме - я знаю, что resol (20) хранится в контейнере API.и остальной код выполняется, затем resol (10) также хранится в контейнере api, а когда стек выполнения пуст, они возвращаются как результат разрешения их обещаний.

Но:

1. Что с таймером?10, почему 20 появляется через много времени после истечения времени ожидания - разрешение 20 появляется на экране через 6 секунд.

2. Что с заказом?Кажется, что они (решите 20 и решите 10) готовы к выполнению и хранятся в памяти, пока я их не использую - в этом случае вывести их на консоль?ВРЕМЯ ВРЕМЕНИ И ЗАКАЗА

Я полон решимости понять это правильно.

Answer 1

Возможно, это поможет прояснить ситуацию.Async-await - это просто синтаксический сахар, поэтому ваша sequentialStart функция точно такая же, как:

var sequentialStart = function() {
  console.log('==SEQUENTIAL START==');

  resolveAfter2Seconds().then(function(slow) {

    resolveAfter1Second().then(function(fast) {

      console.log(fast);
      console.log('why?');
      console.log(slow);
    });
  });
}

Я знаю, что resol (20) хранится в контейнере api, а остальныекод выполняется, затем resol (10) также хранится в контейнере api, а когда стек выполнения пуст, они возвращаются в качестве результатов разрешения своих обещаний

Это не то, что происходит при использовании async-awaitв этом конкретном порядке ваш код выполняет следующие действия:

1. Вызывает resolveAfter2Seconds()
2. await, чтобы разрешить, а затем назначить разрешенное значение константе * 1016.*
3. Позвоните resolveAfter1Second()
4. await, чтобы разрешить, а затем назначьте разрешенное значение константе fast
5. Позвоните console.log(fast), затем console.log('why?'), затем console.log(slow)

Похоже, вы ожидаете, что обещания будут выполняться параллельно, как если бы вы не использовали асинхронный режим-wait, но вся цель async-await в том, чтобы иметь возможность писать код собещает, как если бы это был синхронный (т.е. блокирующий) код без создания вложенного беспорядка из then обратных вызовов.