Объясните пожалуйста как понять такое поведение promise?

Question

[r_ramil]

const promise = new Promise((resolve, reject) => {
	resolve(console.log('start'));
});

promise
	.then(x => console.log('x'))
	.then(y => console.log('y'));

promise.then(z => console.log('z'));

Консоль:

start
x
z
y


При этом, если в then выводить console.log без стрелочной функции, то порядок вывода будет: start, x, y, z

Comments

[Александр]

А что не так в поведении для Вас?

[r_ramil]

Александр, я только начал изучение асинхронности, поэтому для меня казалось очевидным такое поведение: start, x, y, z.

Answer 1

[Сергей Соколов]

"Z" прикрепляется же к самому первому "promise". На том же «уровне», что и "X"

Comments

[r_ramil]

Сергей Соколов благодарю, но как вы тогда объясните, что если в then убрать стрелочные функции, то порядок вывода будет: start, x, y, z?

[Вадим]

r_ramil, Ну так потому что Вы не передаёте коллбэк в виде стрелочной функции, а сразу при инициализации промиса вызываете конcоль лог и он срабатывает в том порядке, какой написан.
Иначе идёт срабатывание в соответствии с резолвом промисов.

Это примерно как разница между:

function f() {console.log('f')}
var a = f; // console.log не произойдёт, а переменная a === f
var b = f(); // console.log произойдёт, но переменная b === undefined, так как функция была вызвана, а её результат присвоен переменной. И это undefined, так как функция ничего не возвращает.

Answer 2

[Александр]

Вывод в консоль не в том порядке, который идёт по коду сверху вниз вызван тем, что в обещаниях мы можем выполнять некоторые долгие операции (например, запросы в бэкенд). В тот момент, когда происходит привязка then, catch и finally интерпретатор не будет ждать их выполнения и пойдет дальше. В итоге после "обхода" кода есть два "места", в которые вернется результат обещания. В первом promise, во время выполнения then мы не знаем, сколько времени потребуется для его выполнения, поэтому интерпретатор идет дальше, к следующему обещанию (в данном случае - "привязке"). Если хотите сделать так, чтобы обещания выполнялись именно в том порядке, который описан в коде, то надо писать как-то так:

(async () => {
  const promise = new Promise((resolve, reject) => {
    resolve(console.log('start'));
  });

  await promise
    .then(x => console.log('x'))
    .then(y => console.log('y'));

  await promise.then(z => console.log('z'));
})();

или так:

const start = async () => {
  const promise = new Promise((resolve, reject) => {
    resolve(console.log('start'));
  });

  await promise
    .then(x => console.log('x'))
    .then(y => console.log('y'));

  await promise.then(z => console.log('z'));
};

start();

или так (если в Вашей среде работает top level await):

const promise = new Promise((resolve, reject) => {
  resolve(console.log('start'));
});

await promise
  .then(x => console.log('x'))
  .then(y => console.log('y'));

await promise.then(z => console.log('z'));

Comments

[Alexandroppolus]

все эти 3 варианта будут эквивалентны простому

promise
  .then(x => console.log('x'))
  .then(y => console.log('y'))
  .then(y => console.log('z'));

[Александр]

Alexandroppolus, Да, но целью вопроса не было найти эквивалент.

Answer 3

[Alexandroppolus]

При этом, если в then выводить console.log без стрелочной функции, то порядок вывода будет: start, x, y, z

Потому что тогда эти console.log будут вызваны синхронно, в том порядке, в котором они встречаются в коде. А сейчас синхронно только создаются те функции, которые вызывают console.log.

Comments

[r_ramil]

Alexandroppolus благодарю