He seguido varias guías sobre cómo esperar correctamente los datos de mi función ListFile(). He registrado el resultado en la consola en ListFile(), por lo que sé que los datos son correctos. Cuando intento y espero a que la función se complete y registre los datos, obtengo uno de dos resultados cuando experimento con esperas y promesas:
getData error: TypeError: undefined is not an object (evaluating 'response.json')o
Promise { "_U": 0, "_V": 0, "_W": null, "_X": null, }Estoy creando una aplicación React Native y la función que llama a ListFile() contiene muchos otros componentes que se procesan, por lo que no puedo hacer que la función completa sea una función asíncrona. No estoy seguro de qué más hacer aquí.
Llamadas 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"); }); }Estás mezclando async/await y Promises. Aunque tienen propósitos similares, generalmente se usan por separado para evitar situaciones como esta en las que se usan juntos y luego crean resultados inesperados si uno no sabe qué buscar.
Anota su función ListFile con async , lo que significa que espera encontrar una await en algún lugar. En su lugar, utiliza .then y .then basados en .catch .
Para convertir su código, puede cambiarlo a esto:
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 } }Debe agregar un return en el método listAll para devolver su valor cuando lo llame desde getData() . Vea el código de muestra a continuación:
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); }); } Además, como dijo @jnpdx, debe usar .then y .catch basados en Promise en su ListFile()