Promiseのresolve後の挙動

初歩的な知識だと思うけど、割と詰まったのでログ。

function f1() {
    return new Promise(resolve => {
        for (let i = 0; i < 10; i++) {
            if (i > 3) resolve(i);
            console.log(i);
        }
    });
}

async function f2() {
    const r = await f1();
    console.log(r);
}

f2();

これを実行すると、console.log(i) が全て出力されてから console.log(r) が実行される。

これから、Promise の resolve 後の挙動は、

1. resolve で Promise の状態は fulfilled に
2. 処理は継続
3. 処理が全て終わってから値がリターン

になってる。ってことかな。

これを解決するには、

function f1() {
    return new Promise(resolve => {
        for (let i = 0; i < 10; i++) {
            if (i > 3)
                resolve(i);
            else
                console.log(i);
        }
    });
}

async function f2() {
    const r = await f1();
    console.log(r);
}

f2();

でよい。

また、resolve() は一回しか呼べないので、

function f1() {
    return new Promise(resolve => {
        for (let i = 0; i < 10; i++) {
            resolve(i);
        }
    });
}

async function f2() {
    const r = await f1();
    console.log(r);
}

f2();

これは 0 が返ってくる。

ただし、どっちも resolve 読んだ後も処理が続いているはずなので、無駄な処理が入ってる。のか。

ふーーむ。

体系的に js の勉強しないとなーーー。

追記１： return 読んでもそこで executor の処理が終わる。