promiseにthenをメソッドチェーンした場合の挙動

Question

promiseについて勉強しており、thenメソッドチェーンによって1秒ごとにコンソールに何かが表示される処理を作ってみようと思いました。

そこでpromiseオブジェクトを返す以下の関数を書き【その１】で実行してみると

var delay = time => {
  return new Promise((r=>{
    setTimeout(()=>{
      r();
    },time)
  }))
}

#############その１############

delay(1000)
  .then(()=>{
    console.log("bbbb");
    delay(1000)
  })
  .then(()=>{
    console.log("cccc");
  })

1000msたった後、bbbbとccccが同時に出力されてしまいました。
以下の【その２】、【その３】では1秒おきにうまく出力することができました。

#############その２############

delay(1000)
  .then(()=>{
    console.log("bbbb");
    return new Promise((r=>{
      setTimeout(()=>{
        r();
      },1000)
    }))
  })
  .then(()=>{
    console.log("cccc");
  })

#############その3############

delay(1000)
  .then(()=>{
    console.log("bbbb");
    return delay(1000)
  })
  .then(()=>{
    console.log("cccc");
  })

#疑問
なぜpromiseオブジェクトをreturnするdelay関数が書いてあるだけ（その１）では、うまくいかなかったのでしょうか？
thenにおけるreturnの解釈のされ方がいまいちわかりません。

#思ったこと

delayは呼び出し元に対してpromiseオブジェクト返却する関数です。その２もpromiseオブジェクトをそのまま返却していると思います（名前がついているかついていないかの違い？）

なるほど、thenの中でpromiseオブジェクトを生成しなくちゃいけないのかと思ったのですが【その３】というpromiseオブジェクトを返却する関数を返却してみたらうまく作動する・・・なぜだ・・

書いていてまた混乱してきてしまいました・・・駄文すみません

どなたかご教示いただけると幸いです。

Answer 1

なぜpromiseオブジェクトをreturnするdelay関数が書いてあるだけ（その１）では、うまくいかなかったのでしょうか？

その1では、promiseをreturnしていません。thenの中のdelayは作られはしますが、ただ放置されています。もちろん、処理の流れに影響を与えることもありません。

Comments

[domidomi]

回答ありがとうございます。つまり

その１のthenの中のdelay(1000)は、あくまでdelay(1000)にたいしてpromiseが返却されているだけであり、本当に返却したいthen()に対してpromiseが返却されているわけではない。そのためthenの勝手にpromiseを返すという機能が発動し、関数thenの中身は一通り終わったのでresolve状態promiseが返され次のthenが即発動した。

その２,3ではreturnを書くことによりthen()に対してpromiseが返却されるため、勝手にresolve状態promiseが返却されることは無く、delay(1000)内でpromiseがresolve状態になるのを待っていた。

thenの中にpromiseを返却する処理があるかないかは、構文解釈される際にjsエンジンがいい感じに理解してくれている。

という考えてあっているでしょうか？

[maisumakun]

> thenの中にpromiseを返却する処理があるかないかは、構文解釈される際にjsエンジンがいい感じに理解してくれている。

いえ、そういうことではありません。.then自体が「コールバックがPromiseを返せばそのPromiseを返す、そうでなければ結果の値をresolveしたPromiseに詰めて返す」という関数になっているだけで、構文解析の特別な処理は全くありません。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise/then#%E8%BF%94%E5%80%A4

なお、returnのない関数も、undefinedを返す関数とみなされます。

[domidomi]

とても納得しました。ありがとうございました！

Answer 2

async/awaitで処理してください

const delay = time => {
  return new Promise((r=>{
    setTimeout(()=>{
      r();
    },time)
  }))
}
delay(1000).then(async()=>{
  console.log("bbbb");
  await delay(1000);
}).then(()=>{
  console.log("cccc");
});

Comments

[domidomi]

async/awaitについて理解が深まりました
ありがとうございます。