JavaScriptの非同期処理の複数処理を直列で実行する際の書き方の違いがわかりません。
Q&A
Closed
解決したいこと
JavaScriptの非同期処理に関する質問です。複数処理を直列で実行する際の正解のコードと間違いのコードに関する違いがわかりません。
「promiseFactory()という関数に引数0を渡して実行したpromiseFactory(0)」
と
「トップレベルで変数countを0と定義して、promiseFactory()を実行して定数instanceに格納した場合」もどちらも関数内のreturn new PromiseからPromiseインスタンスを返しているように思えてしまいます。どう分解すればわかるのか、そもそもの挙動の違いなど教えていただけますと幸いです。
※正解・間違いの中のコードで★をつけていますので参照ください。
正解のコード
function promiseFactory(count) {
return new Promise((resolve, reject) => {
setTimeout(() => {
count++;
console.log(`${count}回目のコールです。時刻：[${new Date().toTimeString()}]`);
if (count === 3) { // 3回目のコールでエラー
reject(count);
} else {
resolve(count);
}
}, 1000);
});
}
promiseFactory(0) // ★★★★★★★★★
.then(count => { return promiseFactory(count); })
.then(count => { return promiseFactory(count); })
.then(count => { return promiseFactory(count); })
.then(count => { return promiseFactory(count); })
.catch(errorCount => {
console.error(`エラーに飛びました。現在のカウントは ${errorCount} です。`);
}).finally(() => {
console.log("処理を終了します。");
});
// > 1回目のコールです。時刻：[16:23:19 GMT+0900 (日本標準時)]
// > 2回目のコールです。時刻：[16:23:20 GMT+0900 (日本標準時)]
// > 3回目のコールです。時刻：[16:23:21 GMT+0900 (日本標準時)]
// > エラーに飛びました。現在のカウントは3です。
// > 処理を終了します。
間違いのコード
let count = 0;
function promiseFactory() {
return new Promise((resolve, reject) => {
setTimeout(() => {
count++;
console.log(`${count}回目のコールです。時刻：[${new Date().toTimeString()}]`);
if (count === 3) { // 3回目のコールでエラー
reject(count);
} else {
resolve(count);
}
}, 1000);
});
}
const instance = promiseFactory(); //★★★★★★★★★★
instance
.then(() => { return instance; })
.then(() => { return instance; })
.then(() => { return instance; })
.catch(errorCount => {
console.error(`エラーに飛びました。現在のカウントは ${errorCount} です。`);
}).finally(() => {
console.log("処理を終了します。");
});
// > 1回目のコールです。時刻：[16:50:00 GMT+0900 (日本標準時)]
// > 処理を終了します。
自分で試したこと
console.log(typeof promiseFactory(0)) // > Object
console.log(typeof instance) // > Object
だったので余計わからなくなりました。
（補足）
参考書には間違えている理由として、promiseFactory()（間違いとしてあげたコード中のの★部分）の記述によって、promiseFactory関数内部のコードが実行され、Promiseのコールバック関数(reject, resolve) => {...}が同期的に実行される。
と書いてあるのですが、どうしてそうなるのでしょうか？
0
