Promise の可視化

壁を突き破れ…

Promise の実行タイミングを可視化するために、delay(millisecs) という新しいメソッドを定義します。

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

このユーティリティは、タイムアウトが経過した時点で解決されます。

delay に渡したミリ秒数は、.then のコールバックへ引数として渡されます。

4 つの例（アニメーション付きタイムライン）を見てみましょう。

Example #1/4

console.log() の実行が delay(msec) によって遅延される様子を示します。

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

Timeline showing delay 1000 then console log running after one second

これは一般的な間違いの例です。

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"));

Timeline showing console log running immediately before the delay finishes

3 つの Promise が同時に実行されます。

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

Timeline showing three delay promises resolving after one two and three seconds

Promise.all と 3 つの delay Promise。同時に実行されます。

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

Timeline showing Promise all waiting for all three delay promises

クレジット:

アニメーション非同期図: Patrick Biffle

本記事のインスピレーション元: https://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html