javascript - 如何等待所有数据下载到Firebase(Firestore)存储中？

Question

我正在使用 Firestore 和 Storage 在 Vue 中制作一个轻型仪表板。我不是专业人士，所以我陷入了一些本应简单的事情中。我有一个函数应该根据文件名获取所有 URL(这就是存储的工作原理)

getImages: function(uid, images) {        
    images.forEach((filename) => {
        var ref = firebaseApp.storage().ref('images/' + uid + "/" + filename);
        ref.getDownloadURL().then(function(url) {   
          this.finalImages.push(url)
          console.log(url);
        }).catch(function(error) {
          switch (error.code) {
            case 'storage/object_not_found':
              // File doesn't exist
              console.log('Object not found');
              break;

            case 'storage/unauthorized':
              // User doesn't have permission to access the object
              console.log('You do not have the right permissions');
              break;

            case 'storage/canceled':
              // User canceled the upload
              console.log('Canceled');
              break;

            case 'storage/unknown':
              // Unknown error occurred, inspect the server response
              console.log('Who knows...');
              break;
          }
        })
    })
  }

但是 URL 在代码完成后下载，所以我从来没有看到它们。如何停止一切并等待 URL 出现在 finalImages 数组中然后继续？

Answer 1

您可以将每个请求映射到一个 promise ，然后等待所有 promise 完成:

getImages: function(uid, images) {        
  Promise.all(images.map((filename) => {
    return new Promise((resolve, reject) => {
      var ref = firebaseApp.storage().ref('images/' + uid + "/" + filename);
      ref.getDownloadURL().then(function(url) {
        resolve(url);
      }).catch(function(error) {
        // Uncomment this line to ignore errors.
        reject(error);
        switch (error.code) {
          case 'storage/object_not_found':
            // File doesn't exist
            console.log('Object not found');
            break;

          case 'storage/unauthorized':
            // User doesn't have permission to access the object
            console.log('You do not have the right permissions');
            break;

          case 'storage/canceled':
            // User canceled the upload
            console.log('Canceled');
            break;

          case 'storage/unknown':
            // Unknown error occurred, inspect the server response
            console.log('Who knows...');
            break;
        }
      })
    });
  })).then((finalImages) => {
    // all images.
  })
}