【问题标题】：React JS - promise returns before execution completes. Async function does not workReact JS - 承诺在执行完成之前返回。异步功能不起作用
【发布时间】：2020-10-10 07:27:05
【问题描述】：

我正在尝试通过调用过滤数据并返回数据的函数来从 firebase 加载数据。

当我在主函数中调用此函数时，它返回“未定义”。我知道数据在那里（console.log（postsArray））打印数据，但我猜返回在加载数据之前执行。我做错了什么？

calling_Function_in_Main = async () => {
    const data = await FirebaseData ();
    console.log(data);
  };

FirebaseData 是我在主函数中调用的函数，用于加载数据并返回数据

let postsArrays=[];


const FirebaseData = async () => {

  const getViewableLink = async (link) => { //some function  };

  const loadData = async () => {

    const database = firebase.database();
    const data = database.ref();
    const loadProfile = data
      .child('Posts')
      .orderByChild('Active')
      .equalTo(true)
      .once('value', function gotData(data) {

        Object.values(readInfo).forEach(async (element) => {
         element.Option1Link = await getViewableLink(
              preLink + element.Option1Link,
            );
            postsArray.push(element);
          }
        });
      })
      .catch((error) => {
          console.log(error);
        }
      })
      .then((postsArray) => {
          console.log(postsArray);
          return postsArray;
      });
  };

  await loadData();
};
export default FirebaseSwipeData;

【问题讨论】：

尝试在你的loadData函数结束时执行return loadProfile，否则你什么都不返回（未定义）。如果你返回一个承诺，你也可以摆脱async。
实际上你甚至不使用loadProfile，你可以只使用return data.child('..... 你的forEach( 也需要重构，因为那也不会等待。
forEach 需要一个同步函数，使用 for 循环代替，forEach 不适用于异步代码

标签： javascript react-native asynchronous return-value es6-promise

【解决方案1】：

您不能将 foreach 与 async/await 一起使用，因为它不是异步的。它正在阻塞。

你有两种方法可以解决这个问题：

1- 依次读取：可以使用`for...of`循环

for(const element of Object.values(readInfo)) {
   element.Option1Link = await getViewableLink(
      preLink + element.Option1Link,
   );
   postsArray.push(element);
}

2- 并行阅读：可以使用`Promise.all`

await Promise.all(Object.values(readInfo).map(async (element) => {
  element.Option1Link = await getViewableLink(
     preLink + element.Option1Link,
  );
  postsArray.push(element);
}));

希望为你解决问题

【讨论】：

感谢@Hani-Ghazi 的帮助。现在我在FirebaseData () 中获得了正确的数组，但是我在calling_Function_in_Main 中获得的数据仍然未定义。我在返回 postArray 时做错了吗？
@Ashton ya 你应该在await loadData(); 之后返回postArray，我还强烈建议在FirebaseData 函数中定义postArray，然后再定义loadData，这样你就可以使用新的变量每次调用FirebaseData函数

1- 依次读取：可以使用for...of循环

2- 并行阅读：可以使用Promise.all

1- 依次读取：可以使用`for...of`循环

2- 并行阅读：可以使用`Promise.all`