Firebase 承诺返回未定义的数据 Javascript

Question

我遵循了一些关于如何正确等待来自 ListFile() 函数的数据的指南。我已经在 ListFile() 中将输出记录到控制台，所以我知道数据是正确的。当我尝试等待函数完成并记录数据时，我在尝试等待和承诺时得到两个输出之一：

getData error: TypeError: undefined is not an object (evaluating 'response.json')

或

Promise {
  "_U": 0,
  "_V": 0,
  "_W": null,
  "_X": null,
}

我正在创建一个 React Native 应用程序，调用 ListFile() 的函数包含一堆其他呈现的组件，因此我无法使整个函数成为异步函数。不知道在这里还能做什么。

调用 ListFile()

const getData = async () => {
    try {
        const response = await ListFile();
        const data = response.json();
        console.log(data);
    } catch (err) {
        console.log("getData error: " + err);
    }
}

getData(); //always returns getData error: TypeError: undefined is not an object (evaluating 'response.json')

列表文件()

async function ListFile() {
    // Reference Firebase Container
    var filesInStorageList = [];
    let content = [];
    const listRef = ref(fbStorage, filePath);
    console.log("Listing Files");


    // List all files in container
    listAll(listRef)
        .then((res) => {
            res.prefixes.forEach((folderRef) => {
                // All the prefixes under listRef.
                // You may call listAll() recursively on them.
                console.log(res);
            });
            res.items.forEach((itemRef) => {
                // All the items under listRef.
                let fileInStorage = itemRef["_location"]["path_"].slice(filePath.length);
                filesInStorageList.push(fileInStorage);
                // CORRECT DATA IS LOGGED console.log("Pushing " + fileInStorage);
                // CORRECT DATA IS LOGGED console.log(filesInStorageList);
            });

            return filesInStorageList;
        }).catch((error) => {
            // Uh-oh, an error occurred!
            console.log("ListFile - ERROR");
        });
}

Answer 1

您正在混合使用 async/await 和 Promises。尽管它们的用途相似，但通常将它们分开使用，以避免出现这种情况，即它们一起使用，然后在不知道要查找什么的情况下产生意想不到的结果。

你用 async 注释你的 ListFile 函数，这意味着它期望在某处找到 await。相反，您使用 Promise-based .then 和 .catch.

要转换您的代码，您可以将其更改为：

async function ListFile() {
    // Reference Firebase Container
    var filesInStorageList = [];
    let content = [];
    const listRef = ref(fbStorage, filePath);
    console.log("Listing Files");

    // List all files in container
    try {
      const res = await listAll(listRef);
      //...do your forEach loops
      return filesInStorageList;
    } catch(err) {
      //handle your error
    }
}

Answer 2

当从 getData() 调用它时，您应该在 listAll 方法上添加一个 return 到 return 其值。请参阅下面的示例代码：

  const getData = async () => {
      try {
          ListFile()
          .then((response) => {
            // do something here.
            console.log(response);
          });

      } catch (err) {
          console.log("getData error: " + err);
      }
  }
  
  getData();

  async function ListFile() {
    // Reference Firebase Container
    var filesInStorageList = [];
    let content = [];
    const filePath = "test/";
    const listRef = ref(storage, filePath);

    // List all files in container
    return listAll(listRef)
        .then((res) => {
            res.prefixes.forEach((folderRef) => {
                // All the prefixes under listRef.
                // You may call listAll() recursively on them.
                console.log(res);
            });
            res.items.forEach((itemRef) => {
                // All the items under listRef.
                let fileInStorage = itemRef["_location"]["path_"].slice(filePath.length);
                filesInStorageList.push(fileInStorage);
                // CORRECT DATA IS LOGGED console.log("Pushing " + fileInStorage);
                // CORRECT DATA IS LOGGED console.log(filesInStorageList);
                // console.log(filesInStorageList);
                
            });

            return filesInStorageList;
        }).catch((error) => {
            // Uh-oh, an error occurred!
            console.log(error);
        });
}

此外，正如@jnpdx 所述，您必须在 ListFile()

上使用 Promise-based .then 和 .catch

Firebase 承诺返回未定义的数据 Javascript

Firebase Promise Returning Undefined Data Javascript

javascript

promise

async-await

firebase

react-native