新しいことにはウェルカム

技術 | 電子工作 | ガジェット | ゲーム のメモ書き

JavaScriptのPromiseは非同期関数だと勘違いしていた

下記の記事を読んで知ったのですが、JavaScriptのPromiseは同期呼び出しされるんですね。

Promiseに渡される関数は、非同期関数だと思い込んでました。

以下、自分用にPromise呼び出し順をまとめておきます。

Promise呼び出し順まとめ

Promiseに渡される関数は、Promise生成時に即実行される

console.log("start");

new Promise((resolve, reject) => {
    console.log("1");
});

new Promise(async (resolve, reject) => {
    console.log("2");
});

console.log("end");

async関数でも即実行される。

結果

start
1
2
end

then()が非同期関数で、resolve()はthen()をタスクキューに登録する関数

console.log("start");

new Promise((resolve, reject) => {
    console.log("1");
    resolve(null);  // regist then()
    console.log("2");
}).then(() => {
    console.log("3");
});

new Promise((resolve, reject) => {
    console.log("4");
}).then(() => {
    console.log("5");
});

console.log("end");

2つ目のthen()はタスクキューに登録されていないので、「5」は表示されない。

結果

start
1
2
4
end
3

reject()とcatch()の関係も同様

reject()で即catch()が呼ばれるのではない。catch()はreject()によって登録され、非同期呼び出しされる。

console.log("start");

new Promise((resolve, reject) => {
    console.log("1");
    reject(null); // regist reject()
    console.log("2");
}).catch(() => {
    console.log("3");
});

console.log("end");

結果

start
1
2
end
3

感想など

恥ずかしながら、Promiseに渡される関数が非同期関数で、resolve()でthen()が即実行されると勘違いしていました。

なので、「resolve()の後にコードを書く意味があるの?」とずっとモヤモヤしていましたが、resolve()呼び出し時に非同期登録されるんですね。やっとスッキリしました。