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

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

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()呼び出し時に非同期登録されるんですね。やっとスッキリしました。

関連カテゴリー記事

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com