Javascript 为什么forkJoin从我的观察值返回错误的值？

我有一个应用程序正在使用Firebase存储发送一些图像数据，因此我使用以下方法：

startUpload() {
  if (typeof this.fileList !== 'undefined' && this.fileList.length > 0) {
    const observableList = [];
    for (let i = 0; i < this.fileList.length; i++) {
      // The storage path
      const path = this.userModel.companyCode + `/${new Date().getTime()}_${this.fileList[i].name}`;

      // Totally optional metadata
      const customMetadata = {
        app: 'My AngularFire-powered PWA!'
      };
      const fileRef = this.storage.ref(path);

      // The main task
      this.task = this.storage.upload(path, this.fileList[i], {
        customMetadata
      });

      // Progress monitoring
      this.percentage = this.task.percentageChanges();
      this.snapshot = this.task.snapshotChanges();

      // The file's download URL
      observableList.push(
        this.task.snapshotChanges().pipe(
          finalize(async () => {
            return await fileRef.getDownloadURL();
          }))
      );

      // observableList = this.task.snapshotChanges();
      // observableList.push(taskObservable);
    }
    console.log(observableList);
    forkJoin(
      observableList
    ).subscribe(
      response => {
        console.log(response);
      }
    );
  }
}

当我单独使用此函数并像这样使用时：

this.task.snapshotChanges().pipe(
  finalize(async () => {
    this.downloadUrl = await fileRef.getDownloadURL().toPromise;
  }))

它们返回正确的URL，this.downloadUrl是一个全局变量，它是downloadUrl:Observable

但是我不想一个接一个地返回我想要的3个结果，所以我有一个想法使用类似于javascript中Promise.All（）的forkJoin：

console.log(observableList);
forkJoin(
  observableList
).subscribe(
  response => {
    console.log(response);
  }
);

我在控制台里看到了这个：

（3） [UploadTaskSnapshot，UploadTaskSnapshot，UploadTaskSnapshot]

---

如何从他们那里获取下载URL？

finalize使用返回类型void的回调函数。这就是为什么它在你单独处理的情况下起作用，但在你试图退货时却不起作用。

我认为下面的代码应该适合您

 startUpload() {
    if (typeof this.fileList !== "undefined" && this.fileList.length > 0) {
      const observableList = [];
      const fileRefList = [];
      this.fileList.forEach(file => {
        const path =
          this.userModel.companyCode + `/${new Date().getTime()}_${file.name}`; // Totally optional metadata
        const customMetadata = { app: "My AngularFire-powered PWA!" };
        fileRefList.push(this.storage.ref(path)); // The main task
        this.task = this.storage.upload(path, file, {
          customMetadata
        }); // Progress monitoring
        this.percentage = this.task.percentageChanges();
        this.snapshot = this.task.snapshotChanges();
        observableList.push(this.snapshot);
      });
      console.log(observableList);
      forkJoin(observableList)
        .pipe(map(async (_, i) => await fileRefList[i].getDownloadURL()))
        .subscribe(response => console.log(response));
    }
  }

 startUpload() {
    if (typeof this.fileList !== "undefined" && this.fileList.length > 0) {
      const observableList = [];
      const fileRefList = [];
      this.fileList.forEach(file => {
        const path =
          this.userModel.companyCode + `/${new Date().getTime()}_${file.name}`; // Totally optional metadata
        const customMetadata = { app: "My AngularFire-powered PWA!" };
        fileRefList.push(this.storage.ref(path)); // The main task
        this.task = this.storage.upload(path, file, {
          customMetadata
        }); // Progress monitoring
        this.percentage = this.task.percentageChanges();
        this.snapshot = this.task.snapshotChanges();
        observableList.push(this.snapshot);
      });
      console.log(observableList);
      forkJoin(observableList)
        .pipe(map(async (_, i) => await fileRefList[i].getDownloadURL()))
        .subscribe(response => console.log(response));
    }
  }