これまでasync / await をなんとなくでしか理解していなかったばかりに盛大に時間をロスしてしまったので反省として記録にまとめます。

今後どなたかの役に立てば幸いです。

処理の中でfetchを呼び出し、その処理が完了してから続きを行う

今回やろうとしたことは以下。

// IDの照会と設定
const getID = () =>{
  fetch(url).then(res => ID = res)
}

// イベントリスナーの中
if( !ID ){
  getID()
}
// IDを元に続きの処理を行う

何も考えずにこのまま書くと、IDが取得されていないままつづきの処理が実行されるのでエラーとなります。

最終的な正解。

const getID = async()=>{// getId() 自体が非同期関数
  await fetch().then(略)
}

// イベントリスナーは同じ

fetch自体がPromiseを返す非同期処理なので、fetchをawaitする必要があった。

下のように呼出し処理をawaitにしても、その先でfetchが非同期にふるまうので間違い。

// 間違っていた書き方
const getID()=>{
  fetch().then()
}
// fetch()の完了をまたずにthen()が処理されてしまう


// リスナー
if( !ID ){
  ( async()=>{
    await getID(); 
    // この書き方だと「getID()の完了を待つ」。
    // 本当に待ってほしいのはgetID()の中で処理されているfetch() 
  })()
}

参考リンク

MDN：非同期関数