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

Question

実現したいこと

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

前提

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

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

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

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

該当のソースコード

const listRef = ref(storage, "gs://meta-grave.appspot.com/image/");
listAll(listRef)
  .then((res) => {
    res.items.forEach((itemRef) => {
      let url2 = getDownloadURL(itemRef);
      console.log(url2);
    });
  })
  .catch((err) => {
    console.log(err);
  });

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

試したこと

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

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

Answer 1

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

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

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

Comments

[anxiety666444]

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

[退会済みユーザー]

> その辺をわかりやすく解説してるサイトなどはありますでしょうか

自分的に（あくまで自分的に）分かりやすかったのは、

(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]

ありがとうございます。