質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.45%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

非同期処理

非同期処理とは一部のコードを別々のスレッドで実行させる手法です。アプリケーションのパフォーマンスを向上させる目的でこの手法を用います。

Q&A

解決済

3回答

1632閲覧

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

HS1111

総合スコア91

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

非同期処理

非同期処理とは一部のコードを別々のスレッドで実行させる手法です。アプリケーションのパフォーマンスを向上させる目的でこの手法を用います。

0グッド

0クリップ

投稿2023/01/26 06:41

実現したいこと

下記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してもスコープが違ってしまいますし、、
困っております。

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2023/01/26 07:10

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

2023/01/26 07:20

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

回答3

0

ベストアンサー

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

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

投稿2023/01/26 06:58

編集2023/01/26 07:00
maisumakun

総合スコア145208

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

HS1111

2023/01/26 07:34

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

2023/01/26 07:52

> 後続の処理で該当変数を参照したい場合、fulfilledか否かを判定して結果を取り出す方法って一般的でしょうか? letで用意した変数に、取得前はundefinedなど正当な値として入らないものを入れておいて、読む側で「ロードされていないこともありうる」として実装することはあります。 > その場合、Promiseオブジェクト内にはPromiseResultで欲しい結果が入ってますが、PromiseResultにはアクセス可能でしょうか? thenあるいはawaitで非同期的にアクセスするしかありません。
guest

0

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

javascript

1let hogehoge = null; 2const sethoge=async()=>{ 3 hogehoge = await fetch(url).then(res=>res.json()); 4}; 5(async()=>{ 6 await sethoge(); 7 console.log(hogehoge); 8})(); 9

投稿2023/01/26 07:38

yambejp

総合スコア115053

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

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

投稿2023/01/26 08:08

編集2023/01/26 10:18
penguin520

総合スコア345

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.45%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問