ブラウザコンソール上の"Promise"結果について

実現したいこと

ブラウザのコンソール上に表示されるPromise{<Pending>}の意味を理解したい

前提

Reactでfirebaseのstorageから複数画像データを取得し、それをページに反映するものを作っています.
使用しているモジュールは

{getStorage, getdownloadURL, listAll} from "firebase/storage"
です

発生している問題・エラーメッセージ

Promise {<pending>}
[[Prototype]]: Promise
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: "ダウンロードURL"

該当のソースコード

javascript
1const listRef = ref(storage, "gs://meta-grave.appspot.com/image/");
2listAll(listRef)
3  .then((res) => {
4    res.items.forEach((itemRef) => {
5      let url2 = getDownloadURL(itemRef);
6      console.log(url2);
7    });
8  })
9  .catch((err) => {
10    console.log(err);
11  });

url2の中身がそのままurl文字列になることを期待しておりました

試したこと

かなり初歩的な問題だと思うのでpromiseに関しての動画、記事をいくつか見ましたが、このコードでpromiseオブジェクトが返ってくるという仕組みが理解できません

補足情報（FW/ツールのバージョンなど）

回答1件

ベストアンサー

getDownloadURL は非同期メソッド（Promise を返す）ではないのですか？　なので .then とか await を使う必要があるのでは？

「firebase getdownloadurl」でググってヒットした記事（下記）の使用例を見てそう言ってるだけですので、ハズレだったらすみません。

Cloud Storage onWebでファイルをダウンロードする
https://firebase.google.com/docs/storage/web/download-files?hl=ja

投稿2023/02/11 06:53

編集2023/02/11 06:57

SurferOnWww

総合スコア17941

回答へのコメント

anxiety666444

2023/02/11 07:11

おっしゃる通りで、getdownloadURLの後に.thenをつけたら解決しました。ありがとうございます。初学者なんですが、関数をconst promise = new Promiseで囲ってresolveやrejectの状態を管理するケースと、今回のような場合の違いがわからなくて...その辺をわかりやすく解説してるサイトなどはありますでしょうか

SurferOnWww

2023/02/11 07:23

> その辺をわかりやすく解説してるサイトなどはありますでしょうか自分的に（あくまで自分的に）分かりやすかったのは、 (1) 非同期関数は MDN のドキュメントの説明非同期関数 https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/async_function (2) Promise というのは何かについては以下のドキュメント「現代の JavaScript チュートリアル」の Promise https://ja.javascript.info/promise-basics 非同期処理:Promise/Async Function の [ES2015] Promise https://jsprimer.net/basic/async/ (3) Async/await については現代の JavaScript チュートリアル https://ja.javascript.info/ の中の Async/await https://ja.javascript.info/async-await ・・・です。個人の好みもありますのでご参考まで。

anxiety666444

2023/02/11 07:24

ありがとうございます。