JS 非同期 awaiについて

Question

awaitの挙動が理解できないのですが、なぜ下記のようなことが発生するのでしょうか?

router.post("/", async (req, res, next) => {
  const token = req.headers.token;
  const payload = req.body.payload;
  const decoded = await CheckIdToken(token).catch(console.log);
  const uid = decoded.uid;
 //ここから
 CreateWork(uid, payload, next);
  console.log("LITSTENEND CREATEWORK");
  return res.json({
    status: 200,
  });
});

async function CreateWork(uid, data, next) {
  console.log("================ SEARCH =================");
  const client = await pool.connect();
  var user = await client
    .query("SELECT * FROM USERS WHERE uid = $1", [uid])
    .catch(next);
  const id = user.rows[0].id;

 //こいつが後から出でくる。
  console.log("================ continue =================");

  var sql =
    "INSERT INTO WORKS (user_id, title, detail, github, deploy, thumbnail) values ($1, $2, $3, $4, $5, $6)";
  const values = [
    id,
    data.title,
    data.detail,
    data.giturl,
    data.workurl,
    data.thumbnail,
  ];
  let result = await client.query(sql, values);
  sql = createSql(data.tags, result.rowCount);
  client.query(sql);
  console.log("END CREATEWORK");
}

コンソール
//
================ SEARCH =================
[1] LITSTENEND CREATEWORK
[1] ================ continue =================
[1] END CREATEWORK

ここで疑問なのがなぜawaitで非同期関数を同期的に振る舞っているのにもかかわらず、こののようなことが発生するのでしょか?
一応、下記のようにすると同期的にはなります。

await CreateWork(uid, payload, next);

Answer 1

async関数と言っても、実態としては単なる「Promiseを返す関数」でしかありません。そして、awaitの役割は、「awaitの後に書かれた式がPromiseだった場合、そのresolveを待つ」ことです。

つまり、async関数をawaitせずに呼んだ場合、Promiseを返すだけになって、次の行へそのまま進んでしまいます。受け取る側のawaitは「一応」ではなく、非同期実行を行うために必須のものです。

Comments

[2_34_koki]

すいません。一つ疑問あのですが、下記のようなコードを実行した時に、
結果がBAAAAABCになりました。
async function A(){
console.log("A");
console.log("A");
console.log("A");
console.log("A");
console.log("A");
}

async function B(){
console.log("B");
A();
console.log("B");
}

function C() {
console.log("C");
}

B();
C();

Bはasyncにっているのにもかかわらず、中身を全て実行しています。
この場合だと、なぜ次の行にステップされないのかわからないです。

Answer 2

Promise の結果（resolver または rejectorを実行することで処理が終了）を待つのが await です。

フロー制御の標準となった Promise も実装は非同期処理です。このため 結果を待たずに次の行を処理します(console.log("LITSTENEND CREATEWORK");が先に実行される理由)。

Promise は .then() .catch() でコールバック関数を与えるという独特な実装が特徴になります。
メソッド名 then をGoogle翻訳すると「その後」と訳されるように、メソッドチェーンで書くと同期的で読みやすいという特徴を持っていますが、非同期処理に過ぎないため、複数の Promise 化された処理を複雑に構成するとコールバック地獄に陥ることに変わりなかったのです。

後に await という構文が登場し、Promise の結果を「待つ」実装のおかげで、完全な同期的記述が実現できるようになりました。
await は コールバックを書かずに済む 糖衣構文 とも言えそうです。