Having trouble accessing value of a Promise in Javascript

Question

I'm having trouble understanding how to access a promise value after it's been resolved. I've read numerous posts on the topic, most saying that using.then() after a function call should return the result of the resolved promise, but instead I can't seem to get anything but the Promise itself with my array of values inside.

  async componentDidMount() {
    ...

    await database.getAllFiles("BurglarSystemFiles").then((res) => {
      this.setState({files: res})
    });
    console.log(this.state.files)
  }

Above is the function I'm calling to set the state of my variable. My console.log() return a [Promise] every time. The following is the code that is being called.

    async getAllFiles(page) {
        var files = [];
        await firebase.storage().ref(page).listAll().then(async function(res) {
            res.prefixes.forEach(async function(folderRef) {
                files.push(this.getAllFilesCallback(folderRef));
            }.bind(this))
        }.bind(this))
        return files;
    }

    async getAllFilesCallback(folderRef) {
        var files=[];
        await folderRef.listAll().then(async function(res) {
            res.items.forEach(async function(file) {
                file.getDownloadURL().then(async function (url) {
                    files.push({
                        name: file.name,
                        url: url
                    })
                })
            })
        })
        return files;
    }

I'm extremely new to Promises and asynchronous functions so any help would be appreciated!

Answer 1

Asynchronous code gets hard when you mix callbacks with Promises and async/await. I believe the following should work for you. It uses a project that I started to simplify complex async tasks like yours.

const { pipe, map, get } = require('rubico')

// page => firebase_folders_response
const getFirebaseFolders = page => firebase.storage().ref(page).listAll()

// folderRef => [{ url, name }]
const getAllFilesCallback = pipe([
  folderRef => folderRef.listAll(),
  get('items'),
  map(file => pipe([
    file => file.getDownloadURL(),
    url => ({ url, name: file.name }),
  ])(file)),
])

// [[...], [...], [...], ...] => [...]
const flatten = arr => arr.flat(1)

// page => [files]
const getAllFilesFunction = pipe([
  getFirebaseFolders,
  // page -> firebase_folders_response

  get('prefixes'),
  // firebase_folders_response -> [folderRef]

  map(getAllFilesCallback),
  // [folderRef] => [[{ url, name }, ...], [{ url, name }, ...], ...]

  flatten,
  // [[{ url, name }, ...], [{ url, name }, ...], ...] => [{ url, name }, { url, name }, ...]
])

// then, in your class
// ...

  async getAllFiles(page) {
    return getAllFilesFunction(page)
  }