如何同時運行 getDownloadURL 和 getMetaData 並將結果輸入同一個 object？ Firebase 存儲

Question

所以我有這個組件，它渲染媒體（圖像或視頻）以顯示上傳的媒體（到 Firebase 存儲）。 目前我有一個useEffect掛鈎，它從 Firebase 存儲中提取數據並將數據存儲到 state 中。 目前的樣子：

const [uploadedMedia, setUploadedMedia] = useState([]);

  useEffect(() => {
    const uploadedMediaRef = ref(storage, "appTutorials/" + data.id + "/");

    const getMedia = async () => {
      setUploadedMedia([]);
      listAll(uploadedMediaRef).then((resp) => {
        resp.items.forEach((item) => {
          getDownloadURL(item).then((url) => {
            setUploadedMedia((prev) => [...prev, url]);
          });
        });
      });
    };
    getMedia();
  }, []);

發生的情況是，在初始渲染時，應用程序將列出存儲中存在的所有數據，然后我們通過 Firebase 提供的getDownloadURL方法遍歷數據以獲取下載 URL。 然后我將 URL 放入uploadedMedia的媒體 state 中，這是一個列表，稍后我將通過 map 渲染圖像/視頻。

但是，我想做的是通過getMetaData方法獲取元數據，這樣我就可以知道它渲染的是什么類型的媒體。 這樣我就可以對圖像和視頻進行條件渲染，其中圖像應該使用<img>標簽和<iframe>或<video>標簽上的視頻進行渲染。 我想同時提取 URL 和元數據，以便我可以將這兩個響應存儲在 object 中，如下所示：

[
    {
        url: "https://link-to-media-here",
        type: "png",
    }
]

我怎樣才能做到這一點？ 我想這應該很容易，因為我們可以進行數組操作（？），但到目前為止我似乎無法做到。

Answer 1

API 不提供組合getDownloadURL和getMetaData的結果的方法。 getDownloadURL 有點特殊，因為它可能會更改 object 元數據以添加一個令牌字符串，該字符串通過返回的 URL 提供對 object 的訪問。 getMetaData 只是獲取那里的內容並且不做任何更改。 因此，您必須同時調用兩者才能獲得所需的一切。 您當然可以異步調用它們，並使用它們返回的 Promise 以及Promise.all來等待它們都完成。