Promiseのチェーンメソッドの挙動のサンプル。
function promiseFn(count) {
return new Promise((resolve, reject) => {
setTimeout( () => {
count++;
console.log(`${count}回目の呼び出し`);
if(count === 3){
reject(count);
} else {
resolve(count);
}
}, 1000 );
});
}
promiseFn(0)
.then(count => { return promiseFn(count); })
.then(count => { return promiseFn(count); })
.then(count => { return promiseFn(count); }) // ←この関数は実行されない
.catch( errorCount => {
console.error(`エラーに飛びました。カウント数は${errorCount}。`);
})
.finally( () => {
console.log("処理の終了");
});
console.log("初回に出力されるログ。");
/*
> 初回に出力されるログ。
> 1回目の呼び出し
> 2回目の呼び出し
> 3回目の呼び出し
> ❌ エラー処理: カウントは3。
> 処理の終了
*/
上のチェーンメソッドを async/await で書き直す。
function promiseFn(count) {
return new Promise((resolve, reject) => {
setTimeout( () => {
count++;
console.log(`${count}回目の呼び出し`);
if(count === 3){
reject(count);
} else {
resolve(count);
}
}, 1000 );
});
}
async function exe(){ // (1)
try { // (2)
let count = await promiseFn(0);
count = await promiseFn(count);
count = await promiseFn(count);
count = await promiseFn(count); // ← この関数は実行されない
} catch ( errorCount ){
console.error(`エラー処理: カウントは${errorCount}。`);
} finally {
console.log("処理の終了");
}
}
exe();
console.log("初回に出力されるログ。"); // (3)
/*
> 初回に出力されるログ。
> 1回目の呼び出し
> 2回目の呼び出し
> 3回目の呼び出し
> ❌ エラー処理: カウントは3。
> 処理の終了
*/
- await(チェーンメソッド処理)を関数内で使う場合は、asyncをfunction の前に追加する。
- エラー処理のため、try{} catch(){} finally処理を施す。
- Promiseはジョブキューでの非同期処理なので、グローバルコンテキスト(この場合、console.log(“初回に出力されるログ。”);)が先に処理される。
3.については 1.「コールスタック」が優先され、次に 2.「ジョブキュー」が実行され、最後に 3. 「タスクキュー」が実行される。
setTimeout(function taskQueue() {
console.log("taskQueueの実行");
});
Promise.resolve().then( function jobQueue1() {
console.log("jobQueue1の実行");
});
Promise.resolve().then( function jobQueue2() {
console.log("jobQueue2の実行");
});
console.log("グローバルコンテキスト実行");
/*
> グローバルコンテキスト実行
> jobQueue1の実行
> jobQueue2の実行
> taskQueueの実行
*/