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。
> 処理の終了
 */
  1. await(チェーンメソッド処理)を関数内で使う場合は、asyncをfunction の前に追加する。
  2. エラー処理のため、try{} catch(){} finally処理を施す。
  3. 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の実行
 */