Вопрос: Есть две цепочки promise, которые выводят сообщения в консоль. Первый выводит: tick1, tick2, tick3. Второй: tick3, tick1, tick2
Код 1:
/// Код 1
const p = new Promise(resovle => setTimeout(resovle));
new Promise(resolve => resolve(p)).then(() => {
console.log("tick 3");
});
p.then(() => {
console.log("tick 1");
}).then(() => {
console.log("tick 2");
});Код 2:
const p = new Promise(resolve => setTimeout(resolve));
Promise.resolve(p).then(() => {
console.log("tick 3");
});
p.then(() => {
console.log("tick 1");
}).then(() => {
console.log("tick 2");
});Почему вывод разный, разве конструкции не эквивалентны?
Ответ:
Прежде чем начать я введу обозначения чтобы не запутаться по ходу объяснения.
Ремарка об обозначениях:
Promise - конструктор promise - экземпляр Promise
Итак, при создании promise, происходят следующие вещи:
1) Note: Поля в квадратных скобках - внутренние поля, которые используются механизмами внутри реализации самого языка и недоступны извне. Также эти поля принадлежат конкретному promise: [[PromiseState]], [[PromiseResult]], [[PromiseFulfillReactions]], [[PromiseRejectReactions]], [[PromiseIsHandled]] 2) [[PromiseState]] устанавливается в pending 3) [[PromiseFulfillReactions]] устанавливается в пустой список микрозадач fulfill 4) [[PromiseRejectReactions]] устанавливается в пустой список микрозадач reject 5) [[PromiseIsHandled]] устанавливается в false (поле о том было ли Promise обработано) 6) Создаются разрешающие функции: resolve и reject через функцию CreateResolvingFunctions 7) Вызывается функция-executor, это та функция, которая передается в Promise при создании экземпляра, в которую передаются resolve и reject, которые создали выше 8) Если вдруг происходит ошибка с внезапным завершением, то происходит вызов reject функции 9) Возвращаем наш созданный promise 10) Note: [[PromiseResult]] - используется в других операциях, здесь он просто определяется, имеет значение undefined
Так теперь вы знаете об алгоритме new Promise(executorFunction)
Начинаем погружение...
Прежде чем мы перейдем к Promise.resolve, нужно выяснить, что делает классический resolve в executor.
Итак я упоминал алгоритм, который создает разрешающие функции resolve и reject. Это CreateResolvingFunctions, давайте зайдем в него. Тут происходит достаточное количество шагов инициализации и создания этих функций, но мы рассмотрим только важную часть. Так как нас интересует часть с resolve, то шаг 2 - то что нам надо, который говорит, что шаги которые описаны в Promise Resolve Functions будут присвоены в специальную переменную, от себя скажу, что эти шаги будут запущены в тот момент когда resolve непосредственно будет вызван в коде. То есть функция resolve, которая будет исполняться при вызове это и есть Promise Resolve Functions. Далее начинается самое интересное, потому что в resolve может быть передано что угодно; опишу базовые кейсы:
resolve("hi")- передается примитив, таким образом это соответствует шагу 8 этого алгоритма, далее такой resolve будет прямо здесь же разрешен и promise получит состояние fulfilled со значением "hi". Все это произойдет до того как синхронный код будет прочитан полностью.resolve(new Promise((resolve) => resolve("hi")))- вот тут ситуация сложнее, так как передаем сложный объект и его нужно разрешить (ваш случай как раз такой). За разрешение таких записей отвечают строки 13, 14, 15, 16. Thenable объекты рассматривать не будем (хотя по большей части наш пример и есть thenable объект, только официальный). Ну-с при таком раскладе когда в resolve лежит объект promise, наш promise, который мы пытаемся разрешить, не разрешается на месте и он будет разрешен в соответствии с очередью микрозадач.
На данном этапе что мы можем понять? Примитивные значения разрешаются сразу, до окончания синхронного кода, а promise (thenable-объекты) разрешаются после и в соответствии с очередью микрозадач UA.
Так надеюсь с resolve внутри promise все ясно. Теперь время того чтобы понять как работает Promise.resolve и почему результат совершенно другой.
Открываем спецификацию с Promise.resolve и видим, что вызывается PromiseResolve в которую передаются два аргумента первый тот что является this - это Promise в данном случае и второй аргумент - это передаваемое значение. Заходим в PromiseResolve и давайте рассмотрим в таком же стиле как я сделал это с обычным resolve.
Promise.resolve("hi")- передается примитив, и это соответствует шагам 2, 3, 4. Резонный вопрос: соответствуют ли эти шаги классическому resolve? Увы, но не совсем. Классический resolve озадачен лишь тем чтобы разрешить promise, а вот Promise.resolve обязан создать оболочку promise. Только 3ий шаг соответствует классическому resolve.Promise.resolve(new Promise((resolve) => resolve("hi")))- передается promise, и это соответствует шагу 1.b. Я долго думал как описать этот шаг, поэтому скажу вкратце, этот шаг проверяет значение свойства "constructor" в передаваемом объекте, и если это свойство равно Promise, тогда мы возвращаем передаваемый promise. Звучит это сложно. Поэтому вот как это выглядит наглядно:Promise.resolve(new Promise((resolve) => resolve("hi")))получается вот чтоnew Promise((resolve) => resolve("hi")). По сути реализация избавляется от Promise.resolve и отдает бразды управления непосредственно самому promise.
Надеюсь теперь теперь видно различие между такими "схожими" resolve, конструкциями.
Теперь примеры, и да я их перепишу, чтобы их можно было отчетливо различать, семантически они ничего не теряют даже приобретают и объяснять станет на таком коде куда проще.
Примечание к примерам:
Помимо очереди/стека макрозадач и микрозадач UA будут еще очереди promise. Очереди promise в данном случае рассматриваются только для fulfilled promise, и соответственно они соответствуют полю [[PromiseFulfillReactions]]. Rejected promise не рассматриваются, так как их даже нет в нашем коде.
Первый пример:
const p = new Promise(resolve => setTimeout(resolve));
const p2 = new Promise(resolve => resolve(p));
const der_p2 = p2.then(() => {
console.log("tick 3");
});
const der = p.then(() => {
console.log("tick 1");
});
const der2 = der.then(() => {
console.log("tick 2");
});Все выполняется в порядке очереди
Макро стадия
Так как скрипт является макрозадачей априори, то он и выполняется.
setTimeout - создает и отправляет в планировщик UA макрозадачу, пусть ее имя #_task1
resolve(p) - создает и отправляет в планировщик UA микрозадачу, пусть ее имя #task1
p2.then() - создает и отправляет микрозадачу в очередь ожидания, пусть ее имя #task2
p.then() - создает и отправляет микрозадачу в очередь ожидания, пусть ее имя #task3
der.then() - создает и отправляет микрозадачу в очередь ожидания, пусть ее имя #task4
Очередь p2: [#task2]
Очередь p: [#task3]
Очередь der: [#task4]
Стек микрозадач: [#task1]
Стек макрозадач: [#_task1]Микро стадия
#task1 - микрозадача выполняется (не разрешает p2, эта задача нужна для того чтобы создать совместимость между этим promise и тем что вкладывается в качестве разрешения), создается и отправляется в очередь p новая микрозадача, назовем ее #task5
Очередь p2: [#task2]
Очередь p: [#task3, #task5]
Очередь der: [#task4]
Стек микрозадач: []
Стек макрозадач: [#_task1]Макро стадия
resolve в setTimeout является кодом макрозадачи, а поэтому он выполняется, но так как передается пустая функция без аргументов, то ничего в resolve не передается. Данный resolve, запускает процесс разрешения p, и отправляет связанные с ним микрозадачи в планировщик UA
Очередь p2: [#task2]
Очередь p: []
Очередь der: [#task4]
Стек микрозадач: [#task3, #task5]
Стек макрозадач: []Микро стадия
#task3 - микрозадача выполняется, выводит "tick 1", разрешает der, отправляет в планировщик UA связанные с der задачи
#task5 - микрозадача выполняется, разрешает p2, отправляет в планировщик UA связанные с p2 задачи
Очередь p2: []
Очередь p: []
Очередь der: []
Стек микрозадач: [#task4, #task2]
Стек макрозадач: []Стек микрозадач еще не пуст продолжаем оставаться в стадии микро
#task4 - микрозадача выполняется, выводит "tick 2", разрешает der2, отправлять в планировщик UA нечего
#task2 - микрозадача выполняется, выводит "tick 3", разрешает der_p2, отправлять в планировщик UA нечего
Стек микрозадач: []
Стек макрозадач: []Теперь второй пример:
const p = new Promise(resolve => setTimeout(resolve));
const p2 = Promise.resolve(p);
const der_p2 = p2.then(() => {
console.log("tick 3");
});
const der = p.then(() => {
console.log("tick 1");
});
const der2 = der.then(() => {
console.log("tick 2");
});Все выполняется в порядке очереди
Макро стадия
Так как скрипт является макрозадачей априори, то он и выполняется.
setTimeout - создает и отправляет в планировщик UA макрозадачу, пусть ее имя #_task1
Promise.resolve() - возвращает переданный в него аргумент это promise p, теперь p2 === p, проверить это можно вставив код с консолью после строчки с константой p2
p2.then() - создает и отправляет микрозадачу в очередь ожидания, пусть ее имя #task1
p.then() - создает и отправляет микрозадачу в очередь ожидания, пусть ее имя #task2
der.then() - создает и отправляет микрозадачу в очередь ожидания, пусть ее имя #task3
Очередь p === p2: [#task1, #task2]
Очередь der: [#task3]
Стек микрозадач: []
Стек макрозадач: [#_task1]Микро стадия
Пусто
Очередь p === p2: [#task1, #task2]
Очередь der: [#task3]
Стек микрозадач: []
Стек макрозадач: [#_task1]Макро стадия
resolve в setTimeout является кодом макрозадачи, а поэтому он выполняется, но так как передается пустая функция без аргументов, то ничего в resolve не передается. Данный resolve, запускает процесс разрешения p или p2, и отправляет связанные с ним микрозадачи в планировщик UA
Очередь p === p2: []
Очередь der: [#task3]
Стек микрозадач: [#task1, #task2]
Стек макрозадач: []Микро стадия
#task1 - микрозадача выполняется, выводит "tick 3", разрешает der_p2, отправлять в планировщик UA нечего
#task2 - микрозадача выполняется, выводит "tick 1", разрешает der, отправляет в планировщик UA связанные с der задачи
Очередь p === p2: []
Очередь der: []
Стек микрозадач: [#task3]
Стек макрозадач: []Стек микрозадач еще не пуст продолжаем оставаться в стадии микро
#task3 - микрозадача выполняется, выводит "tick 2", разрешает der2, отправлять в планировщик UA нечего
Стек микрозадач: []
Стек макрозадач: []Все :)
@dSalieri ого, не знал что такие фокусы можно делать, а именно присваивать ф-ию resolve глобальной переменной и вызывать ее потом. Не много не понимаю только, это работает благодаря тому что все функции в JS формируют замыкание по умолчанию? Просто все эти встроенные функции res и rej одинаковые у каждого экземпляра Promise, а значит они отличаются только по контексту создания, и именно благодаря этому работает второй пример?
P.S. Приступаю к вашему разбору Promise.