С чем связана ошибка в Promise?

Question

[Михаил Р.]

Приветствую!

Для тренировки написал код, который имитирует выполнение анимации шаг за шагом, использовал Promise. В связи с этим 2 вопроса:

1. Правильно ли я понял логику работы Promise? Если нет, то подскажите, как правильно было бы написать данный код...

function animation(step, delay, log) {
	return new Promise((resolve, reject) => {
		if(typeof delay === "number") {
			setTimeout(() => {
				resolve(log(`Анимация №:${step}, выполнена успешно`));
			}, delay);
		} else reject(log(`Анимация №:${step}, не выполнена`));
	});
}

function log(result) {
	console.log(`Лог: ${result}`);
}

animation(1, 500, log)
		.then(animation(2, 1000, log))
		.then(animation(3, 2000, log));

// Лог: Анимация №:1, выполнена успешно
// Лог: Анимация №:2, выполнена успешно
// Лог: Анимация №:3, выполнена успешно

2. Пытаюсь имитировать ошибку на 4 шаге, передав не number, а string. Почему тогда 4 шаг выполняет вперед первых 3х, и с чем связана ошибка?

function animation(step, delay, log) {
	return new Promise((resolve, reject) => {
		if(typeof delay === "number") {
			setTimeout(() => {
				resolve(log(`Анимация №:${step}, выполнена успешно`));
			}, delay);
		} else reject(log(`Анимация №:${step}, не выполнена`));
	});
}

function log(result) {
	console.log(`Лог: ${result}`);
}

animation(1, 500, log)
		.then(animation(2, 1000, log))
		.then(animation(3, 2000, log))
		.then(animation(4, "500", log));

// Лог: Анимация №:4, не выполнена
// Uncaught (in promise) undefined
// Лог: Анимация №:1, выполнена успешно
// Лог: Анимация №:2, выполнена успешно
// Лог: Анимация №:3, выполнена успешно

Answer 1

[dollar]

Вы не понимаете, как работают промисы и JS. Это самая главная ошибка.

Попробую чуть-чуть объяснить.
fn(a,b,c).then(fn(k,m,n))
Вот так вы пишете. Что здесь происходит.
fn срабатывает и сразу же возвращает объект типа промис, в котором вы вызываете метод then. Этот метод принимает две функции - для успеха и для фейла. В качестве функции успеха вы указываете выражение fn(k,m,n). Окей, далее JS вычисляет это выражение, то есть буквально выполняет эту функцию и в качестве результата получает новый промис, который используется в качестве callback функции успеха для первого промиса.

Внимательно перечитайте документацию.
https://learn.javascript.ru/promise

Исправлением ошибки будет что-то вроде этого:

animation(1, 500, log)
    .then(e=>animation(2, 1000, log))
    .then(e=>animation(3, 2000, log))
    .then(e=>animation(4, "500", log));

Answer 2

[Антон Швец]

then ждет на вход коллбек, т.е. функцию.
А вы ему пихаете промис, да еще и стартуете все эти промисы одновременно.

Если сделать так
.then(() => animation(2, 1000, log))
то animation выполнится, когда резолвится промис -> будет выполнен коллбек, в котором запускается следующая animation