Проблемы с доступом к значению обещания в Javascript

Question

Мне сложно понять, как получить доступ к значению обещания после его разрешения. Я читал множество сообщений о topi c, в большинстве из которых говорилось, что использование .then () после вызова функции должно возвращать результат разрешенного обещания, но вместо этого я не могу получить ничего, кроме самого обещания с моим массив значений внутри.

  async componentDidMount() {
    ...

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

Выше - функция, которую я вызываю, чтобы установить состояние моей переменной. Мой console.log () каждый раз возвращает [Обещание]. Ниже приведен код, который вызывается.

    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;
    }

Я новичок в Promises и асинхронных функциях, поэтому любая помощь будет принята с благодарностью!

Answer 1

Асинхронный код усложняется, когда вы смешиваете обратные вызовы с обещаниями и async / await. Я считаю, что следующее должно сработать для вас. Он использует проект , который я начал упрощать сложные асинхронные c задачи, подобные вашей.

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)
  }