Визуализация промисов

Сквозь асинхронность...

Чтобы визуализировать выполнение промисов, определим новый метод delay(millisecs).

function delay(millisecs) {
  return new Promise(resolve => {
    setTimeout(() => resolve(millisecs), millisecs);
  });
}

Это утилита, которая завершается после истечения указанного таймаута.

Значение задержки в миллисекундах будет передано в колбэк .then.

Рассмотрим 4 примера (с анимированными временными шкалами).

Пример #1/4

Здесь показано, как выполнение console.log() задерживается из-за delay(msec).

delay(1000).then(() => console.log("done"));

Временная шкала: delay 1000, затем console.log выполняется через одну секунду

Пример #2/4

Здесь показана распространённая ошибка.

console.log вызывается сразу в момент начала delay(1000), а не после задержки, как вы, вероятно, хотели.

Поскольку console.log возвращает undefined, наш .then() молча игнорируется.

Обратите внимание на разницу: typeof console.log === 'function' против typeof console.log() === undefined.

Обычно желаемый способ использования console.log показан в примере #1. Убедитесь, что вы передаёте функции в .then и .catch.

delay(1000).then(console.log("done"));

Временная шкала: console.log выполняется немедленно, до завершения delay

Пример #3/4

Три промиса выполняются одновременно.

delay(1000).then(console.log);
delay(2000).then(console.log);
delay(3000).then(console.log);

Временная шкала: три промиса задержки завершаются через одну, две и три секунды

Пример #4/4

Promise.all с тремя промисами delay. Они выполняются одновременно.

Promise.all([delay(1000), delay(2000), delay(3000)]).then(console.log);

Временная шкала: Promise.all ждёт завершения всех трёх промисов задержки

Благодарности:

Анимированные асинхронные диаграммы: Patrick Biffle

Вдохновение для статьи: https://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html