将 async/await 与 firebase 一起使用答案

【问题标题】：using async/await with firebase将 async/await 与 firebase 一起使用
【发布时间】：2022-02-09 08:48:07
【问题描述】：

我正在尝试使用 async/await 从 firebase 存储中获取图像，这是我的功能：

import { ref as sRef, getDownloadURL } from "firebase/storage";
...    
async getCharacterIconUrl(character) {
  return await getDownloadURL(sRef(storage, `characters/${character}/icon`));
}

然后，我在这里使用这个函数：

import { ref, child, get } from "firebase/database";
...
async componentDidMount() {
  const dbRef = ref(db);

  let snapshot = await get(child(dbRef, "en/characters"));
  if (snapshot.exists()) {
    let characters = Object.keys(snapshot.val()).map((key) => {
      return {
        _id: key,
        img: this.getCharacterIconUrl(key),
        ...snapshot.val()[key],
      };
    });
    this.setState({ characters: characters });
  } else {
    console.log("No data available");
  }
}

我遇到的问题是characters 中的img 永远无法解决。

我该如何解决这个问题？

【问题讨论】：

这段代码中有很多与promise有关的潜在错误。您希望 img: 属性是一个承诺，还是承诺将使用的值？

标签： javascript reactjs firebase-realtime-database async-await

【解决方案1】：

您的getCharacterIconUrl 函数是async，所以您需要等待它。

试试这个...

const characters = await Promise.all(
  Object.entries(snapshot.val()).map(async ([_id, val]) => ({
    _id,
    img: await this.getCharacterIconUrl(_id),
    ...val,
  }))
)
this.setState({ characters });

注意.map() 回调也是async。我也在使用Object.entries()，因为您需要键和值。

【讨论】：

【解决方案2】：

由于getCharacterIconUrl 是一个异步函数，它返回一个promise。因此，您的 img 字段是一个承诺；结合map()，就变成了一个promise数组。因此，我们可以使用Promise.all()来解决它们

async componentDidMount() {
  const dbRef = ref(db);

  let snapshot = await get(child(dbRef, "en/characters"));
  if (snapshot.exists()) {
    let characterPromises = Object.keys(snapshot.val()).map(async (key) => {
      return {
        _id: key,
        img: await this.getCharacterIconUrl(key),
        ...snapshot.val()[key],
      };
    });
    this.setState({ characters: await Promise.all(characterPromises)});
  } else {
    console.log("No data available");
  }
}

【讨论】：