Async/await обещает альтернативу. Переписать ожидание на обещание

Я пытался понять, как await работает в разных сценариях, и столкнулся с проблемой.

new Promise(async (resolve, reject) => {
    resolve(); 

    console.info(await Promise.resolve(7))
    
    console.info(8)
}).then(() => console.info(3))

этот код регистрирует 7, 8, 3 - поэтому он не помещает console.info в очередь микрозадач. (вот чего я не понимаю.
Итак, я попытался переписать строку await на синтаксис Promise:

new Promise(async (resolve, reject) => {
    resolve(); 

    const pr = new Promise((res) => {
        res(7)
    })
    pr.then((num) => console.info(num))
    
    console.info(8)
}).then(() => console.info(3))

Но теперь он помещает then в очередь микрозадач и журналирует 8 первым.
Журналы: 8, 7, 3.

Вопрос: почему моя попытка воссоздать console.info(await Promise.resolve(7)) некорректна?
Почему await Promise.resolve() выполняется немедленно?

new Promise(async ... НИКОГДА не является хорошим «образцом» — независимо от того, что вы делаете после этого
Jaromanda X 18.05.2024 11:01
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
1
86
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Правило простое: await помещает весь код под ним и все, что находится за пределами его выражения в своей строке, в микрозадачу:

<script type = "module">

    console.info ( ( await Promise.resolve({name: 'John'}) ).name );
//                        -------------------------------              this is executed sync (first)
//  --------------                                         -------     this is executed in the created microtask
//  all the code below is executed also in the created microtask
</script>

Итак, ваш console.info(8) действительно помещен в микрозадачу, но, как вы можете проанализировать, он ставится последним в первой микрозадаче.

new Promise(async (resolve, reject) => {
    resolve();

    console.info(await Promise.resolve(7)) // await puts both the console.info's into the first microtask
    
    console.info(8)
}).then(() => console.info(3)) // then puts the callback into the second microtask

Давайте немного изменим, чтобы узнать больше, как это работает:

<script type = "module">

new Promise((resolve, reject) => {
    resolve(); 
}).then(() => console.info(3)) // then puts the callback into the first microtask

await 1; // puts the below code into the second microtask 

console.info(await Promise.resolve(7)) // both the console.info's are put into the third microtask

console.info(8)

</script>

Другие вопросы по теме

Основное статическое свойство «текст», изолированное от актера, не может быть изменено из неизолированного контекста; это ошибка в Swift 6
Свободный шаблон с асинхронными методами
Почему новые промисы используются рядом с ожиданием, хотя в них нет необходимости?
Типы возвращаемых результатов против асинхронных и ожидающих
Как цикл «for await» в асинхронной «очереди» может вызвать «удаление из очереди» перед «постановкой в ​​очередь»? Он возвращает new Promise() перед помещением в очередь
В C# async/await влияет ли длина задержки на возврат управления вызывающему абоненту?
Функция Async останавливается в середине
Превратите неожиданное необработанное ошибочное обещание в предупреждение @processTicksAndRejections (созданное ошибкой выдачи в "then")
Использование async с коробочной ошибкой из tokio::runtime
Вызов асинхронного метода блокирует основной поток