JSで変数に非同期で取得した値を格納したい。

Question

実現したいこと

下記JavaScriptで外部APIから初期データを取得し変数に格納したいと思ってます。

const hogehoge = 
(async () => {
		const res  = await fetch(`${URI}`)
		return await res.json()
})()
console.log(hogehoge)

発生している問題

即時関数内でawaitで逐次的に処理し結果を変数hogehogeに格納出来ると思ってました。
が、変数hogehogeはPromise {<pending>}になっており、JSONオブジェクトではなく、Promiseオブジェクトが入ってます。

変数hogehogeにJSONオブジェクトが確実に格納出来る様にするにはどの様にするといいのでしょうか？

※APIは正常に動作しており、Promiseいずれfulfilled になります。

var hogehoge = null; 
(async () => {
		const res  = await fetch(`${URI}`)
		hogehoge = await res.json()
})()
console.log(hogehoge)

上記の方法でも瞬間NULLになってしまいますし、関数内でconstしてもスコープが違ってしまいますし、、
困っております。

ご教授頂ければ幸いです。

Comments

[m.ts10806]

その後どのように使いたいかにもよるのではないでしょうか。
「非同期」で何をして、結果をどう扱いたいか。
例題過ぎると問題の根本解決に繋がらない可能性があります。

[HS1111]

マスターデータの取得を前処理でグローバル的に定数に格納し、イベントリスナー内の関数内等で参照利用を考えておりました。
プリセットの初期値として値を持ち回る利用方法を想定しておりました。

Answer 1

非同期的に取得される値を同期的に変数へ格納する方法は、JavaScriptの枠内には存在しません。

「const hogehoge = await （後略）とする」、あるいは「let hogehogeとしておいてあとから代入されるようにする」ぐらいの手段しかありません。

Comments

[HS1111]

プリセット値を持ち回るイメージでした。
後続の処理で該当変数を参照したい場合、fulfilledか否かを判定して結果を取り出す方法って一般的でしょうか？
その場合、Promiseオブジェクト内にはPromiseResultで欲しい結果が入ってますが、PromiseResultにはアクセス可能でしょうか？

[maisumakun]

> 後続の処理で該当変数を参照したい場合、fulfilledか否かを判定して結果を取り出す方法って一般的でしょうか？

letで用意した変数に、取得前はundefinedなど正当な値として入らないものを入れておいて、読む側で「ロードされていないこともありうる」として実装することはあります。

> その場合、Promiseオブジェクト内にはPromiseResultで欲しい結果が入ってますが、PromiseResultにはアクセス可能でしょうか？

thenあるいはawaitで非同期的にアクセスするしかありません。

Answer 2

非同期で変数にデータを入れ込むのですからasync/awaitでセットされるのを待ってください

let hogehoge = null; 
const sethoge=async()=>{
  hogehoge = await fetch(url).then(res=>res.json());
};
(async()=>{
  await sethoge();
  console.log(hogehoge);
})();

Answer 3

-根本的に回答が間違っていたので削除-