DanLevy.net

JA

Promise Gotchas

よくあるミスを避ける

Hero image for Promise Gotchas

Promiseは他の値とは違う動きをする

ほとんどの値のようにその値をそのまま出力することはできません：

// これはPromiseでは意味がありません：
console.log(Promise.resolve(42));


// `.then` インターフェースを使う必要があります：
Promise.resolve(42).then(value => console.log(value));

Promiseはミスをしたときに警告してくれない

よくあるミスの話です。

様々な理由により、TC39によって.thenと.catchにnullを渡すことが可能であると決定されました。例えば、.then(null, null) は有効であり、チェーン内のその「ステップ」をスキップするのが仕様で要求される動作です。

この不幸な結果として、間違えることが非常に容易になってしまいます。

例で見てみよう

ミニチャレンジ：以下のどのオプションが42をconsole.logするでしょうか？

// オプション #1:
Promise.resolve(42).then(console.log());


// オプション #2:
Promise.resolve(42).then(console.log);


// オプション #3:
Promise.resolve(42).then(value => console.log(value));


// オプション #4:
Promise.resolve(42)
  .then(console.log())
  .then(console.log);
答え

答えは #2、#3、#4 です。

なぜでしょうか？.then()に渡されたものの型を見てみましょう：

var arg1 = console.log();
var arg2 = console.log;
var arg3 = value => console.log(value);


typeof arg1 === "undefined";
typeof arg2 === "function";
typeof arg3 === "function";

まだ4番目のオプションがどう動くか疑問ですか？

実際には以下のように実行されています：

// オプション #4 - 実際の実行内容
Promise.resolve(42)
  .then(undefined) // これは値に影響を与えず、次の`.then(fn)`に渡されます
  .then(console.log);
Loading comments...