角度函数在 promise 中使用 then 和 return 语句答案

【问题标题】：angular function using then in promise with return statement角度函数在 promise 中使用 then 和 return 语句
【发布时间】：2021-06-13 08:21:32
【问题描述】：

我需要在我的函数中返回一个空字符串两次（请参阅 return ''。当我使用 catch 错误时，它正在工作，但我不知道如何编辑函数以便删除 catch 错误。这是我的功能：

agencies$: Observable<Agency[]> = this.afs.collection<Agency[]>('agencies')
    .valueChanges()
    .pipe(tap(console.log),
      mergeMap((agencies: Agency[]) => from(agencies)),
      mergeMap((agency: Agency) => {
        return forkJoin([
          this.afStorage.storage
            .refFromURL('gs://agency-logos-paid-keeper')
            .child(`/thumbnails/${agency.agencyId}_700x100.png`)
            .getDownloadURL().then(url => url).catch(error => {
            return '';
          }),
          this.afStorage.storage
            .refFromURL('gs://benefit-cards-paid-keeper').child(`/${agency.agencyId}_200x200.png`)
            .getDownloadURL().then(url => url).catch(error => {
            return '';
          })])
          .pipe(
            tap(([logoUrl, benefitCardPhotoUrl]) => console.log('a', logoUrl, benefitCardPhotoUrl)),
            map(([logoUrl, benefitCardPhotoUrl]) => ({
                ...agency, logoUrl, benefitCardPhotoUrl
              })
            ), catchError((error) => {
              return of({...agency});
            }));
      }),
      map((agency: Agency) => [agency]),
      scan((agencies: Agency[], agency: Agency[]) => {

        const agencyExists = agencies.find(a => a.agencyId === agency[0].agencyId);
        if (!agencyExists) {
          return [...agencies, ...agency];
        }
        return agencies;
      }));

之后我只想删除 .catch(error) （两者）。但是当我尝试它时，我得到了一个错误。如何删除 catch 错误，同时仍然有一个 return 语句。我知道这是一个基本问题，但我无法弄清楚。

【问题讨论】：

如果你不catchError，那么如果observable返回一个错误就会抛出一个错误，这是预期的行为，除非我错过了什么
可能是我遗漏了一些东西...但是由于 catch 错误，一切都正确显示。如果我开始使用 then 函数，我不会按照我需要的方式获取我的网址

标签： angular typescript promise return

【解决方案1】：

根据经验，混合 Promise 和 Observables 通常会导致问题。在您的代码中，我已将承诺更改为 Observables，一切似乎都正常

  agencies$: Observable<any> = this.afs
    .collection<Agency[]>("agencies")
    .valueChanges()
    .pipe(
      tap(console.log),
      mergeMap((agencies: Agency[]) => from(agencies)),
      mergeMap((agency: Agency) => {
        return forkJoin([
          from(
            this.afStorage.storage
              .refFromURL("gs://agency-logos-paid-keeper")
              .child(`/thumbnails/${agency.agencyId}_700x100.png`)
              .getDownloadURL()
          ),
          from(
            this.afStorage.storage
              .refFromURL("gs://benefit-cards-paid-keeper")
              .child(`/${agency.agencyId}_200x200.png`)
              .getDownloadURL()
          )
        ]).pipe(
          tap(([logoUrl, benefitCardPhotoUrl]) =>
            console.log("a", logoUrl, benefitCardPhotoUrl)
          ),
          map(([logoUrl, benefitCardPhotoUrl]) => ({
            ...agency,
            logoUrl,
            benefitCardPhotoUrl
          }))
          // catchError(error => {
          //   return of({ ...agency });
          // })
        );
      }),
      map((agency: Agency) => [agency]),
      scan((agencies: Agency[], agency: Agency[]) => {
        const agencyExists = agencies.find(
          a => a.agencyId === agency[0].agencyId
        );
        if (!agencyExists) {
          return [...agencies, ...agency];
        }
        return agencies;
      })
    );

看到这个demo illustration

【讨论】：

问题是有些机构没有图片。我的代码（带有 catch 错误）确实显示了图像，尽管它给了我一个 get 错误。您的代码也给了我一个 get 错误，但它只会显示那些有图像的机构，并且还有一个错误是图像在 firebase 存储中不存在（请参阅问题末尾的图片）。