Цепочки промисов

Главное про then: он не отдаёт вам старый промис обратно. Он создаёт новый и возвращает его. Поэтому вызовы можно ставить друг за другом — каждый следующий then подписывается не на исходный промис, а на результат предыдущего шага.

const p1 = Promise.resolve(2);
const p2 = p1.then((x) => x * 10);
console.log(p1 === p2);
p2.then((x) => console.log(x));

Новый промис выполнится тем, что вернул обработчик. Вернули число — промис завершится числом, вернули строку — строкой. Значение течёт по цепочке сверху вниз, и каждый шаг получает результат предыдущего в аргументе.

Promise.resolve(1)
  .then((x) => x + 1)
  .then((x) => x * 3)
  .then((x) => console.log(x));

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

const wait = (ms, v) => new Promise((ok) => setTimeout(() => ok(v), ms));

Promise.resolve("старт")
  .then((s) => { console.log(s); return wait(100, "готово"); })
  .then((s) => console.log(s));

Эта пауза — вся суть цепочек. Асинхронный шаг не выпадает из последовательности: он просто занимает в ней своё место, а следующий обработчик спокойно ждёт своей очереди. Разворачивание промиса делает движок, вам не нужно ни писать while, ни подписываться вручную.

Промисы можно вкладывать друг в друга — и тогда получится ровно та лестница, ради ухода от которой их придумали. Вот как выглядит цепочка, написанная «по-колбэчному».

const wait = (ms, v) => new Promise((ok) => setTimeout(() => ok(v), ms));

wait(50, 1).then((a) => {
  wait(50, a + 1).then((b) => {
    wait(50, b + 1).then((c) => console.log(c));
  });
});

const wait = (ms, v) => new Promise((ok) => setTimeout(() => ok(v), ms));

wait(50, 1)
  .then((a) => wait(50, a + 1))
  .then((b) => wait(50, b + 1))
  .then((c) => console.log(c));

Результат одинаковый, но разница не только в отступах. У плоской цепочки один общий хвост: любой шаг можно вставить, убрать или поменять местами, и один catch в конце ловит ошибку с любого уровня. В лестнице каждая ветка живёт своей жизнью, и ошибку из глубины наружу приходится тащить руками.

Promise.resolve(10)
  .then(() => { throw new Error("сломалось на шаге 2"); })
  .then(() => console.log("сюда не дойдём"))
  .catch((e) => console.log(e.message));

Даже если промис уже выполнен, обработчик из then не вызовется прямо сейчас. Он встанет в очередь микрозадач и дождётся, пока доработает текущий синхронный код. Это то самое правило из статьи про промисы: исключений у него нет, и на нём ломается половина «загадочных» выводов в консоли.

console.log("A");
Promise.resolve().then(() => console.log("B"));
console.log("C");

Внутри одной цепочки шаги идут строго по очереди: следующий обработчик не запустится, пока не выполнился промис предыдущего. А две независимые цепочки продвигаются вперемешку — по шагу от каждой.

Promise.resolve().then(() => console.log("1a")).then(() => console.log("1b"));
Promise.resolve().then(() => console.log("2a")).then(() => console.log("2b"));

Promise.resolve().then(() => Promise.resolve("A")).then((v) => console.log(v));
Promise.resolve().then(() => "B").then((v) => console.log(v)).then(() => console.log("C"));

Стрелка без фигурных скобок возвращает значение сама. Как только появляются фигурные скобки, возвращать нужно руками — и вот здесь промис теряется. Обработчик отработает, вернёт undefined, и цепочка поедет дальше, не дожидаясь ничего.

const wait = (ms, v) => new Promise((ok) => setTimeout(() => ok(v), ms));

Promise.resolve()
  .then(() => { wait(50, 42); })
  .then((x) => console.log(x));

const wait = (ms, v) => new Promise((ok) => setTimeout(() => ok(v), ms));

Promise.resolve()
  .then(() => wait(50, 42))
  .then((x) => console.log(x));

Увидели фигурные скобки внутри then — глазами ищите return. Девять из десяти «цепочка не дождалась» — это он.