我有一个接收数据的函数,我使用异步promise 来获得到文档item.poster = await Promise.all(promises)的链接,然后数据没有时间添加到数组中,我得到了一个空array.但是,如果我删除获取文档链接的函数,则一切正常.在调试模式下,我可以很好地看到所有数据,但为什么我会得到一个空数组?

 async FetchData({ state, commit }, to) {
      try {
      
        const q = query(collection(db, to));

        await onSnapshot(q, (querySnapshot) => {
          let data = [];

          querySnapshot.forEach(async (doc) => {

            let promises = [];
            let item = {
              id: doc.id,
              name: doc.data().name,
              slug: doc.data().slug,
              country: doc.data().country,
              duration: doc.data().duration,
              year: doc.data().year,
              video: doc.data().video,
              genres: doc.data().genres,
              actors: doc.data().actors,
            };
            if (to === "films") {
              const starsRef = ref(storage, `images/${doc.id}/poster.png`);

              promises.push(getDownloadURL(starsRef));
              item.poster = await Promise.all(promises);
            }
            data.push(item);
          });
          commit("setData", { data, to });
        });
      } catch (err) {
        console.error(err);
      } }

enter image description here

推荐答案

forEachasync在一起不会很好,因为每一种都是不可等待的.但解决方案很简单,.mapPromise.all():

// async not really needed
async FetchData({ state, commit }, to) {
  const q = query(collection(db, to));
  // TODO: Call the unsubscribeFn method in order to stop
  // onSnapshot callback executions (when needed)
  const unsubscribeFn = onSnapshot(q, (querySnapshot) => {
    const allPromises = querySnapshot.docs.map(async (doc) => {
      const docData = doc.data();
      let item = {
        id: doc.id,
        name: docData.name,
        slug: docData.slug,
        country: docData.country,
        duration: docData.duration,
        year: docData.year,
        video: docData.video,
        genres: docData.genres,
        actors: docData.actors
      };
      // Or you can use
      // let item = { id: doc.id, ...docData };
      if (to === "films") {
        const starsRef = ref(storage, `images/${doc.id}/poster.png`);
        item.poster = await getDownloadURL(starsRef);
      }
      return item;
    });
    Promise.all(allPromises)
      .then((data) => commit("setData", { data, to }))
      .catch(console.error);
  });
}

Javascript相关问答推荐

Flisk和JS错误:未捕获的Syntax错误:意外的令牌'<'

*ngFor和@代表输入decorator 和选角闭合

使用JavaScript单击上一个或下一个特定按钮创建卡滑动器以滑动单个卡

如何用显示网格平滑地将元素从一个地方移动到另一个地方?

给定一个凸多边形作为一组边,如何根据到最近边的距离填充里面的区域

当点击注册页面上的注册按钮时,邮箱重复

在JS中拖放:检测文件

如何在Angular17 APP中全局设置AXIOS

使用Java脚本导入gltf场景并创建边界框

Angular 形式,从DOM中删除不会删除指定索引处的内容,但会删除最后一项

使用auth.js保护API路由的Next.JS,FETCH()不起作用

在VS代码上一次设置多个变量格式

如何在FastAPI中为通过file:/URL加载的本地HTML文件启用CORS?

如何通过Axios在GraphQL查询中发送数组

JWT Cookie安全性

在JavaScript中将Base64转换为JSON

react 路由DOM有条件地呈现元素

将Singleton实例设置为未定义后的Angular 变量引用持久性行为

扩散运算符未按预期工作,引发语法错误

使用VITE开发服务器处理错误