Question

Firebase Promise 返回未定义的数据 Javascript

2022-03-16

270

javascript firebase react-native async-await promise

我已遵循了有关如何正确等待 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')

ListFile()

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 的 .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

您应该在 listAll 方法上添加 return ，以便在从 getData() 调用该方法时返回其值。请参阅下面的示例代码：

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 的 .then 和 .catch>