Chaining async functions?

Question

let val = 0;

async function first() {
    console.log('1a', val);
    second();
    console.log('1b', val);
}

async function second() {
    console.log('2a', val);
    third();
    console.log('2b', val);
}

async function third() {
    console.log('3a', val);
    val = await new Promise(function (resolve, reject) {
        setTimeout(function () {
            resolve(3);
        }, 1000);
    });
    console.log('3b', val);
}

console.log('0a', val);
first();
console.log('0b', val);

I am expecting:

0a 0
1a 0
2a 0
3a 0
3b 3
2b 3
1b 3
0b 3

But I am receiving:

0a 0
1a 0
2a 0
3a 0
2b 0
1b 0
0b 0
3b 3

I'm guessing there is a fundamental thing about async which I am unaware of?

Answer 1

You will have to await all async function calls:

async function first() {
    console.log('1a', val);
    await second();
    console.log('1b', val);
}

async function second() {
    console.log('2a', val);
    await third();
    console.log('2b', val);
}