Promise内のsetTimeoutでthrow文を使用した時の動きがわからない

Question

前提・実現したいこと

JavascriptのPromiseについて学習中です
MDNでPromiseのcatchメソッドのページをみました

発生している問題・エラーメッセージ

Promiseのcatchメソッドではthrow文を使うことでreturn reject()を実行したような動きをできてそれをcatchメソッドでキャッチできると認識してます
ですがこれは、setTimeoutなど非同期に実行される関数の中ではcatchできず、rejectを実行したような動きになりませんでした

該当のソースコード

コード1

var promise1 = new Promise(() => {
	throw "まずいエラー"; // throw(reject)されたので
}).catch(e => {
	console.log("まずいことが起きた");
	console.log(e);
});
// まずいことが起きた　キャッチしたのでエラー処理ができる
// まずいエラー 

コード2

var promise2 = new Promise(() => {
	setTimeout(() => {
		throw "まずいエラー"; // throw(reject)されたので
	}, 1000);
}).catch(e => {
	console.log("まずいことが起きた"); // catchできるはずが・・・
	console.log(e);
});
// uncaught exception: まずいエラー　が発生してしまう

コード3
コード2のthrowをreturn rejectに変えたバージョン(結果はコード2とおんなじ)

var promise3 = new Promise(() => {
	setTimeout(() => {
		return Promise.reject("まずいエラー");
	}, 1000);
}).catch(e => {
	console.log("まずいことが起きた"); // catchできるはずが・・・
	console.log(e);
});
// uncaught exception: まずいエラー　が発生してしまう

試したこと

コード1を実行したあとにpromise1変数の中身をみたらstateがfulfilledになっていて、非同期処理が完了した状態になっていた

しかし、コード2ではthrowが実行されてもpendingのままになっていた

setTimeoutはPromise内部でも非同期で実行されるからこういう動きになるのか・・・？と考えたんですが
非同期で実行しているPromise内でsetTimeoutが非同期的に実行されるってなんだよ？という疑問が生まれてしまい、いまいち全体的な動きが理解できずにいます

補足情報（FW/ツールのバージョンなど）

ブラウザのコンソールで確認してます

よろしくお願いします

Answer 1

setTimeoutはPromise内部でも非同期で実行されるからこういう動きになるのか・・・？と考えたんですが

はい、setTimeoutはPromiseの枠組みで動くわけではないので、setTimeoutに処理を託した時点でPromiseの方は処理が終わります。そのあとsetTimeoutのコールバックが例外を投げようが何を返そうが、Promiseから与えられたresolveやrejectを呼ばない限り、Promiseとは無縁な世界です。

Comments

[avumya]

>setTimeoutに処理を託した時点でPromiseの方は処理が終わります
>そのあとsetTimeoutのコールバックが例外を投げようが何を返そうが、Promiseとは無縁な世界です。
setTimeoutが実行されている時点では既にPromiseは終了している、ということでしょうか？

であれば、setTimeoutの中にある`return reject`は正常に動作しない、ということになりますが、
spookybirdさんが回答してくださったコードでは、setTimeoutの中で`return reject`した結果がcatchメソッドに渡され、処理されています
この動作は、setTimeoutが実行されている時点では既にPromiseは終了している、という動きと矛盾しているように思えます･･･

何か見落としている箇所があれば、ぜひ教えて頂きたいです

[maisumakun]

Promiseのコールバックに来る引数を使えば、Promiseの状態を制御することができます。それに対して、setTimeoutのコールバックでは、返り値が何であろうともただ無視されます、

[avumya]

>Promiseのコールバックに来る引数を使えば、Promiseの状態を制御することができます。
Promiseの引数に渡したresolve、reject関数を使うとPromiseの処理が終了していてもその後ろにつなげたcatchなどの処理を実行できる、ということですか？なんだかとんでもない機能のようですね･･･。

ともあれ、一連の動きに納得できました。ありがとうございました。

Answer 2

やりたいのってこういうことですか？

var promise3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    return reject("まずいエラー");
  }, 1000);
}).catch((e) => {
  console.log(e);
});

追記

Promiseは、生成したときに渡すコールバックの引数に渡ってくるresolveとrejectの実行を待っているにすぎません。
その他は基本的に生成時に実行し、その結果も気にせず無視します。
コールバックの引数に渡ってきたresolveまたはrejectを実行しないと無意味です。

コールバック内で新たなPromiseオブジェクトを生成したところで、それは別物なので関係ありません。
コード2はそれですね。
Promise.reject()は新しいPromiseオブジェクトを生成します。

Comments

[avumya]

そういうことがやりたかったです。
Promise.rejectメソッドでリジェクトされたPromiseオブジェクトを返すのと、回答してくださったように、Promiseの引数に渡したreject関数でリジェクトされたPromiseオブジェクトを返すのでは、動き方が違うのはなぜなんでしょうか？
どちらも同じように「リジェクトされたPromiseオブジェクトを返す」ものだと思っていたのですが･･。

何か見落としている箇所があれば、ぜひ教えて頂きたいです

[avumya]

追記ありがとうございます。

>Promiseは、生成したときに渡すコールバックの引数に渡ってくるresolveとrejectの実行を待っているにすぎません。
`return Promise.reject("まずいエラー")`が実行されても、それは`new Promise`で作成したPromiseオブジェクトには関係のないこと(resolve, reject関数ではない)だから、catchメソッドはsetTimeoutの中でreturnされたPromiseオブジェクトを無視して、`Promise.reject("まずいエラー")`が返り値のPromiseオブジェクトとして出力されるんですね。

また、new Promiseに渡した関数の処理を最後まで実行し終わっても、stateがpendingならresolve、reject関数の実行を待ち続けるんですね。そして、resolve、reject関数が実行されたら後ろにチェーンされたcatch、thenメソッドなどを実行する、と･･･。

まだ混乱した状態ですが、ひとまずこの動作を納得して追うことができていそうな気がします。
どうもありがとうございました。