如何让函数在所有Firebase存储URL订阅执行完成后再返回？

我来帮你搞定这个问题！你现在的代码返回空photoSrcs的核心原因是异步操作的时序问题：forEach里的subscribe是异步执行的，你的函数会直接跳过这些异步逻辑，提前返回还没填充数据的空对象。下面给你两种靠谱的解决方案，根据你的习惯选就行：

方案一：用RxJS的forkJoin（Angular项目推荐） #

因为Firebase的getDownloadURL()返回的是Observable，用RxJS的forkJoin可以等待所有Observable都完成后，再统一处理结果，完美契合批量异步请求的场景：

import { forkJoin, map } from 'rxjs';

loadPhotoUrls(photos: Photo[]): Observable<{[key: string]: string}> {
  // 先收集所有获取URL的Observable，并关联对应的photo.id
  const urlObservables = photos.map(photo => {
    // 注意：这里要去掉引号，用变量photo.fileLocation，不然路径会错！
    const fileRef = this.storage.ref(photo.fileLocation);
    return fileRef.getDownloadURL().pipe(
      map(url => ({ id: photo.id, url }))
    );
  });

  // 用forkJoin等待所有请求完成，再构建最终的photoSrcs对象
  return forkJoin(urlObservables).pipe(
    map(results => {
      const photoSrcs: {[key: string]: string} = {};
      results.forEach(item => {
        photoSrcs[item.id] = item.url;
      });
      return photoSrcs;
    })
  );
}

使用方式： #

在组件里订阅这个函数的返回值，就能拿到填充好所有URL的对象：

this.yourService.loadPhotoUrls(photos).subscribe(photoSrcs => {
  // 这里的photoSrcs就是所有图片URL都加载完成后的结果
  console.log(photoSrcs);
  // 接下来就可以把这个对象绑定到页面上展示图片了
});

方案二：用Promise.all（更熟悉Promise的话选这个） #

如果更习惯Promise的异步写法，可以把每个Observable转成Promise，然后用Promise.all等待所有请求完成：

async loadPhotoUrls(photos: Photo[]): Promise<{[key: string]: string}> {
  const photoSrcs: {[key: string]: string} = {};
  
  // 把每个获取URL的操作包装成Promise
  const urlPromises = photos.map(async photo => {
    const fileRef = this.storage.ref(photo.fileLocation);
    // 把Observable转成Promise
    const url = await fileRef.getDownloadURL().toPromise();
    photoSrcs[photo.id] = url;
  });

  // 等待所有Promise执行完成后再返回
  await Promise.all(urlPromises);
  return photoSrcs;
}

使用方式： #

可以用then或者async/await来获取结果：

// 方式1：用then
this.yourService.loadPhotoUrls(photos).then(photoSrcs => {
  console.log(photoSrcs);
});

// 方式2：用async/await（需要在async函数里执行）
async displayPhotos() {
  const photoSrcs = await this.yourService.loadPhotoUrls(photos);
  console.log(photoSrcs);
}

另外还要提醒你：原来代码里的this.storage.ref('photo.fileLocation')是错误的，这里应该用变量photo.fileLocation，不然会去请求路径为photo.fileLocation的固定文件，而不是每个图片对应的实际路径！

内容的提问来源于stack exchange，提问作者Diskdrive