为什么forkJoin从我的可观察对象返回错误的值?

时间:2019-12-30 14:54:11

标签: javascript angular firebase firebase-storage

我有一个使用Firebase Storage发送一些图像数据的应用程序,所以我正在使用此方法:

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 () => {
    return await fileRef.getDownloadURL();
  }))

当我单独使用此功能并像这样使用时:

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

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

但是我不想一个一个地返回3个结果,所以我有一个想法要使用forkJoin,就像javascript中的promise中的Promise.All()一样。

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

我在控制台中得到了这个

  

(3)[UploadTaskSnapshot,UploadTaskSnapshot,UploadTaskSnapshot]

如何从他们那里获得下载URL?

1 个答案:

答案 0 :(得分:0)

finalize采用返回类型为void的回调函数。这就是为什么它在您的情况下可以单独处理的原因,但是当您尝试退回某些东西时却不起作用。 finalize-rxjs

我认为以下代码应为您工作

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