Как распределяются по очереди задач Promise

Вопрос

Как распределяются по очереди задач Promise

Профессия

Frontend Developer

Что хочет услышать интервьюер

Интервьюер хочет убедиться, что кандидат понимает, как Promise взаимодействуют с Event Loop, как они попадают в очередь микрозадач и как их выполнение связано с синхронным кодом и другими асинхронными операциями.

Ключевые тезисы

• Promise — это объект, представляющий результат асинхронной операции, который может быть выполнен успешно (resolved) или с ошибкой (rejected).
• Когда Promise создается, он начинает выполняться сразу, но его результат попадает в очередь микрозадач (microtask queue).
• Микрозадачи выполняются после завершения текущего синхронного кода и перед обработкой макрозадач (tasks), таких как setTimeout или события.
• Event Loop отвечает за выполнение задач, и он сначала обрабатывает все микрозадачи, прежде чем перейти к макрозадачам.
• Цепочки Promise (then/catch/finally) также добавляются в очередь микрозадач и выполняются в порядке их добавления.

Подробный ответ

Promise — это механизм для работы с асинхронными операциями в JavaScript. Когда создается Promise, он сразу начинает выполняться, но его результат (resolve или reject) попадает в очередь микрозадач (microtask queue). Микрозадачи имеют приоритет над макрозадачами (такими как setTimeout или события), что означает, что Event Loop сначала обработает все микрозадачи, прежде чем перейти к макрозадачам.

Цепочки Promise (then/catch/finally) также добавляются в очередь микрозадач и выполняются в порядке их добавления. Это обеспечивает предсказуемость выполнения асинхронного кода. Например, если внутри then добавить новый Promise, он будет обработан в той же очереди микрозадач, что и предыдущий.

Важно понимать, что микрозадачи выполняются сразу после завершения текущего синхронного кода, но до обработки макрозадач. Это позволяет избежать 'засорения' основного потока и обеспечивает более плавную работу приложения.

Если внутри микрозадачи добавить новую микрозадачу, она будет обработана в той же итерации Event Loop, что может привести к бесконечному циклу, если не соблюдать осторожность.

Практические примеры

Пример 1

Последовательное выполнение Promise

console.log('Start');
Promise.resolve().then(() => console.log('Promise 1'));
setTimeout(() => console.log('Timeout 1'), 0);
Promise.resolve().then(() => console.log('Promise 2'));
console.log('End');
// Output: Start, End, Promise 1, Promise 2, Timeout 1

Пример 2

Цепочка Promise

Promise.resolve()
  .then(() => {
    console.log('First then');
    return Promise.resolve('Second then');
  })
  .then((msg) => console.log(msg));
// Output: First then, Second then

Частые ошибки

• Ошибка: Непонимание порядка выполнения микрозадач и макрозадач. Например, ожидание, что setTimeout выполнится раньше Promise.
• Ошибка: Создание бесконечного цикла путем добавления новых микрозадач внутри существующей микрозадачи.

Связанные темы

• Event Loop в JavaScript
• Асинхронное программирование
• Generics в TypeScript
• Работа с DOM

Follow-up вопросы

Что такое микрозадачи и чем они отличаются от макрозадач?

Уровень: basic

Микрозадачи — это задачи с высоким приоритетом, такие как обработка Promise. Они выполняются сразу после завершения текущего синхронного кода. Макрозадачи, например setTimeout, выполняются после всех микрозадач.

Как Event Loop работает с микрозадачами и макрозадачами?

Уровень: intermediate

Event Loop сначала выполняет весь синхронный код, затем обрабатывает все микрозадачи из очереди микрозадач. После этого он переходит к макрозадачам, таким как setTimeout или события.

Что произойдет, если внутри микрозадачи добавить новую микрозадачу?

Уровень: advanced

Если внутри микрозадачи добавить новую микрозадачу, она будет добавлена в очередь микрозадач и выполнена до перехода к макрозадачам, даже если текущая микрозадача завершилась.

Почему Promise выполняется в микрозадачах, а не в макрозадачах?

Уровень: intermediate

Promise выполняется в микрозадачах, чтобы обеспечить более высокий приоритет обработки асинхронных операций и минимизировать задержки в выполнении кода, связанного с Promise.

Как ведет себя цепочка Promise, если внутри then добавить новый Promise?

Уровень: advanced

Если внутри then добавить новый Promise, он будет добавлен в очередь микрозадач и выполнен после завершения текущего then, но до перехода к макрозадачам.