JavaScriptのPromise処理一覧サンプル
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. 「タスクキュー」が実行される。 ...
