【非同期通信】fetchの完了を待って続きの処理を行う

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

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

asyncやawaitについてはMDNを読んでください。「MDN：非同期関数」

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

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

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

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

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

最終的な正解。

const getID = async()=>{
  await fetch().then(略)
}

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

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

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

// 間違っていた書き方
const getID()=>{
  fetch().then()
}

// リスナー
if( !ID ){
  ( async()=>{
    await getID(); // getID() をawaitしても、その先のfetchの完了を待ってくれない 
  })()
}
// 続きの処理