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