JavaScript Promise.then()の中で非同期処理を行なった場合に、次のthenはその処理完了を待ってくれないのはPromiseの仕様上仕方ないのか？

Question

質問事項

JavaScript初学者です。
Promise.then().then()... を使えば非同期処理を逐次的にコントロールできることがわかりました。
また、Promise.then()は、Promiseがresolveやrejectされるまで実行されないことは理解しています。

ただ、その次のthen、はその前のthenの非同期処理結果を待ってくれないのでしょうか。
（その場合はthenの非同期処理の中でPromiseインスタンス生成して、別のthenチェーンを繋げるしかない？）

例えばのソースコード

    new Promise(function (resolve) {
      console.log("new promise start");
      setTimeout(function () {         
        console.log("new promise setTimeout");   
        resolve();　　　　　　　　<= このresolveされるまで次のThenは動かない（非同期を待つ）
      }, 0);
      console.log("new promise end");
    })
      .then(function () {　　　　<= setTimeoutでresolveされたらこのThenが動く
        console.log("then1");
        return "then1 param";
      })
      .then(function (v) {　　　　<= 前のThenがresolve("then1 param")されたからこのThenが動く
        console.log(v);
        console.log("then2 start");
        setTimeout(function () {
          console.log("then2 setTimeout");
          return new Promise(function (resolve) {
            console.log("then2 new promise start");
            resolve("then2 new promise");　　　　　　<= setTimeoutの中でresolveしたけど。。。
          });
        }, 0);
        console.log("then2 end");
        //then同期処理内でreturnされない場合はresolve()が返される
      })
      .then(function (v) {
        console.log(v);　　　　　<= 前のThenのsetTimeoutを待たずresolve()で動いてしまう
        console.log("then3");
      });

    console.log("end");

new promise start
new promise end
end
new promise setTimeout
then1
then1 param
then2 start
then2 end
undefined　　　　　<= 前のThenのsetTimeoutを待たないのでresolve()で動いてしまう
then3
then2 setTimeout 　　　<= 前のThenのsetTimeout結果は当然最後になる
then2 new promise start

こうするしかない？

質問事項にある通り、thenの非同期処理の中でPromiseインスタンス生成して、別のthenチェーンを繋げるしかないのでしょうか？

    new Promise(function (resolve) {
      console.log("new promise start");
      setTimeout(function () {         
        console.log("new promise setTimeout");   
        resolve();　　　　　　　　<= このresolveされるまで次のThenは動かない（非同期を待つ）
      }, 0);
      console.log("new promise end");
    })
      .then(function () {　　　　<= setTimeoutでresolveされたらこのThenが動く
        console.log("then1");
        return "then1 param";
      })
      .then(function (v) {　　　　<= 前のThenがresolve("then1 param")されたからこのThenが動く
        console.log(v);
        console.log("then2 start");
        setTimeout(function () {
          console.log("then2 setTimeout");
          return new Promise(function (resolve) {
            console.log("then2 new promise start");
            resolve("then2 new promise");　　　　　　<= setTimeoutの中でnew Promise
          }).then(function (v) {
            console.log(v);　　　　　<= setTimeoutの中のPromiseのresolveを待ってくれる
            console.log("then3");
          });
        }, 0);
        console.log("then2 end");
      })


    console.log("end");

new promise start
new promise end
end
new promise setTimeout
then1
then1 param
then2 start
then2 end
then2 setTimeout
then2 new promise start
then2 new promise
then3

回答ありがとうございました！！

根本的なthen()処理の理解が足りていない質問でした。。。
全員BAしたいくらいですが無理なので、コードまで書いてくださった＠SAKASHITA-Kokiさんにさせていただきます。

Answer 1

setTimeoutのコールバックがpromiseをリターンしてもそれは単に
コールバックへのreturnでしかないので、thenに影響する戻り値がないでしょう？
PromiseはsetTimeoutを囲むようにつかってください

Comments

[NayuNayu]

確かにそうですね。ハッと気づきました。（しょうもない質問でした。。。）

> PromiseはsetTimeoutを囲むようにつかってください
こうすることでPending状態のPromiseを返すことで、解決後に後続のThen()が動くようになると。。。

Answer 2

new Promise(function (resolve) {
  console.log("new promise start");
  setTimeout(function () {         
    console.log("new promise setTimeout");   
    resolve();
  }, 0);
  console.log("new promise end");
})
  .then(function () {
    console.log("then1");
    return "then1 param";
})
  .then(function (v) {
    console.log(v);
    console.log("then2 start");
    return new Promise(function (resolve) {
      console.log("then2 new promise start");
      setTimeout(function () {
        console.log("then2 setTimeout");
        resolve("then2 new promise");
      }, 0);
    });
})
.then(function (v) {
  console.log(v);
  console.log("then3");
});

console.log("end");

new promise start
new promise end
end
new promise setTimeout
then1
then1 param
then2 start
then2 new promise start
then2 setTimeout
then2 new promise
then3

thenは必ずPromiseを返します! thenに渡した関数内で文字列や数値などを返しても、then自体はその値でresolveされたPromiseを返します。
チェーンされたthenはresolveされた(fulfilled)Promiseを受け取るのでスグに実行されます。

載せられたコードの問題点はthen2のsetTimeoutに渡した関数内でPromiseを返している点です。ここでPromiseを返しても意味がないことが分かるでしょうか...? そのreturnはsetTimeoutに渡した無名関数のreturnであって、thenに渡した無名関数のreturnではないのです。
なのでthen2はreturnなしで終了(つまりundefinedをreturn)し、then3にはundefinedが渡されます。

こうするしかない？コードは折角のPromiseの利点(所謂コールバック地獄)を台無しにしてしまうので、美しくないですね...
then2内でPromiseを作って返してやり、そのPromiseの中で非同期処理をするのが素直な実装かな、と思います。

どうでしょうか...!?

Comments

[NayuNayu]

> then2はreturnなしで終了(つまりundefinedをreturn)し、then3にはundefinedが渡されます。
やっぱりそうですよね。ただ、解決法がわかりませんでした。。。

> then2内でPromiseを作って返してやり、そのPromiseの中で非同期処理をするのが素直な実装かな、と思います。
ですね！Pending状態のPromiseを返して、解決（Resolve or Reject）を非同期にすれば後続のThenも制御できそうです！ありがとうございます。

Answer 3

Promise を返せばよさそうな？

他の pending 状態の Promise オブジェクトを返した場合、 then によって返された Promise の解決/拒絶は、ハンドラーによって返された Promise の解決/拒絶結果に依存します。また、 then によって返された Promise の解決値は、ハンドラーによって返された Promise の解決値と同じになります。

Promise.prototype.then() - JavaScript | MDN

Comments

[NayuNayu]

MDNみるとまさにその通りのことが書いてましたね（調査不足でしたスミマセン）

return new Promise... の中でsetTimeoutすることでそのThenでは一旦Pending状態のPromiseを返す=>後続のThenは動けない=>setTimeoutで解決する=>後続のThenが動く
ような感じですね。。