Promise then()を繰り返す場合の抜け方

Question

JavaScriptでPromiseのthen()を繰り返す場合、途中で抜けるにはどうしたらいいのでしょうか。
return false;ではだめなようでした。

FuncHoge()
.then(function(){
  console.log("1");
  return Promise; // ←ざっくり書いていますがPromiseオブジェクトをreturnしてます
})
.then(function () {
  console.log("2");
  if (hoge) {
    return false; // 次のthenに行ってほしくないがこれではだめ。console.log("3")が実行される
  } else {
    return Promise;
  }
})
.then(function () {
  console.log("3");
  return Promise;
})
.then(function () {
  console.log("4");
  return Promise;
});

Answer 1

例外を使えばよいのでは。

【Promise.prototype.then() - JavaScript | MDN】
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise/then

then() の引数として渡した関数が失敗状態 (rejected) の Promise が返した場合や、例外(エラー)が発生した場合は、失敗状態 (rejected) の Promise を返します。

Comments

[tokyo]

ありがとうございます！

Answer 2

このサイトでPromise勉強しました。
Qiita：Promiseとasync-awaitの例外処理を完全に理解しよう

Comments

[tokyo]

ありがとうございます！

Answer 3

Promiseのthenチェーンは基本的に一本道で、thenチェーンは最初から最後まで無条件に実行することを大前提で書くと思います。よって途中で中断させるならkei344さんがおっしゃるようにエラー中断することになると思います。エラー扱いなので当然ながらcatch節が実行されます。

途中で抜けるという意味が正常に中断させることであるとすればthenチェーンの中の任意のthen節で中断させることはできず、最後のthen節で制御を分岐させないといけないのではないでしょうか。

例えばPromiseを返すような関数群a,b,c,dがあったとして、あるケースだけbの後に中断したいなら

a()
.then(b)
.then(() => {
  if (...) {
    c()
    .then(d)
    .then(e)
  }
})
.catch(...)

といった具合です。途中で抜けるというよりは、「抜けない場合の処理をthenチェーンの最後のthen節に(入れ子を一段深くする形で)記述する」という感じです。

正常処理としての制御ルートを変化させたい場合、ルートを変えれば変えるほどthenの入れ子構造は深くなっていくと思います。

---

余談：

途中で抜けることを素直に書く手段としては、例えばPromiseに加えて、co/generator function/yieldを使い、非同期処理をあたかも同期処理であるかのように記述する方法があります。(おそらくkanimaruさんが書かれているページと本質的に考え方は同じではないかと思いますが、coしか知らないので本当かどうか自信ないです)

それを使うとPromiseのthenチェーンはプログラムコード上では単純な文の羅列として書けます。このため、途中で制御を変えたければjavascriptとしてのreturnなどの制御文を普通に使えますし、例外はtry-catchで表現することもできます。あたかもマルチスレッドが利用できる言語で同期処理関数を利用して書いているかのように記述できるので、これはこれで一つの分かり易い方法ではないかと思います。

訂正1: 下記のコード例の文法がはちゃめちゃだったので訂正しました。スミマセン

co(function*() {
  const ra = yield a();
  ...
  const rb = yield b();
  ...
  if (...) return
  ...
  const rc = yield c();
  const rd = yield d();
  ...
});  

Comments

[tokyo]

ありがとうございます！

Answer 4

かんがえ方はこうです

<script src="https://www.promisejs.org/polyfills/promise-6.1.0.min.js"></script>
<script>
(function(){
  new Promise(function(resolver,rejector){
    setTimeout(function(){
      console.log("done_a");
      return resolver(this);
    },1000);
  }).then(function(){
    new Promise(function(resolver,rejector){
      setTimeout(function(){
        console.log("done_b");
        return resolver(this);
      },1000);
    }).then(function(){
      new Promise(function(resolver,rejector){
        setTimeout(function(){
          console.log("done_c");
          return resolver(this);
        },1000);
      }).then(function(){
        new Promise(function(resolver,rejector){
          setTimeout(function(){
            console.log("done_d");
            return resolver(this);
          },1000);
        }).then(function(){
          console.log("end");
        }).catch(function(){
          console.log("stop_d");
        });
      }).catch(function(){
        console.log("stop_c");
      });
    }).catch(function(){
      console.log("stop_b");
    });
  }).catch(function(){
    console.log("stop_a");
  });
})();

</script>

※上記各「done_」の後ろのreturn resolver(this);をreturn rejector(this);[
にすれば、その時点で終了となります

Comments

[tokyo]

ありがとうございます！

Answer 5

便乗

日本語のコードで理解するPromise - Qiita

• 同期処理であれば throw new Error()
• コールバックを渡すタイプの非同期処理であれば reject(new Error())

が一番分かりやすいかと思います。

Comments

[tokyo]

ありがとうございます！

Answer 6

Promice.reject()を実行するか、例外エラーを発生させるかのどちらかになるかと思います。
それで最後にcatch文でエラーを捕捉出来ます。

Comments

[tokyo]

ありがとうございます！