如何避免可观测中的可观测

Question

我有一个带有http请求的服务，它返回我的标题的可观察到的内容

servise.ts

get(sort: string): Observable<Response> {
    return this.http.get<any>(this.url, {...});
})

delete(id) {
  return this.http.delete(`${this.url}/${id}`, {...});
}

在我的组件中，我有一个函数从service get Request设置this.headlines。看起来是这样的：

interface IRes {
  searches: {
    label: string,
    id: number,
    value: string,
    ...
  }
}
headlines = [];

loadHeadlines() {
  this.service.get(data).subscribe((res: IRes) => this.headlines= res.headlines);
}

问题是，有时我接收到带有空标签的标题，不需要显示它们，所以我需要对其进行过滤，并对此标题发送.delete（）请求。我尝试了类似的方法（想法是在subscribe之前添加.pipe，然后在另一个subscribe内部调用。）差不多吧

loadHeadlines() {
  this.service.get(data)
    .pipe(
      map(res: IRes => {
        res.headlines.filter(headline => !!headline.label.trim())
          .forEach(headline => this.service.delete(headline.id).subscribe())
      })
    )
    .subscribe((res: IRes) => this.headlines= res.headlines);
}

但不确定这是不是个好主意。在这里哪种方法会更好？

Answer 1

嗯，！！headline.label.trim()绝对不是一个好主意，因为双！会删除所有非空的标题。此外，映射应该是点击。

因此对于完整的管道：

this.service.get(data).pipe(
    map(res => res.headlines)
    tap(headlines => headlines.filter(headline => !headline.label.trim()).forEach(
        headline => this.service.delete(headline.id)
    )),
    map(headlines => headlines.filter(headline => !!headline.label.trim())),
).subscribe(headlines => this.headlines= headlines);

在实际场景中，我会让后端处理这个问题。但是tbh,这是非常固执己见的,因为这里没有客观的对错。

Answer 2

您可以使用RxJSswitchmap运算符将一个可观察对象映射到另一个可观察对象，并使用forkjoin函数组合多个可观察对象。我还使用iif函数检查是否有任何要删除的空headline。

但我不明白你现在用的是什么条件。您似乎正在删除所有headline元素，并带有空的label属性，同时对其余元素调用delete。因此，您实际上是对所有有效元素调用delete。也许必须调整一下。

请尝试以下操作

import { iif, forkJoin, of } from 'rxjs';
import { switchMap } from 'rxjs/operators';

loadHeadlines() {
  this.service.get(data).pipe(
    switchMap((res: IRes) => {
      const emptyHeadlines = res.headlines.filter(headline => !headline.label.trim()); // <-- all headlines with empty labels
      const deletes$ = forkJoin(
        emptyHeadlines.map(headline => this.service.delete(headline.id))
      ).pipe(
        map(_ =>  // <-- map back to return only the headlines with defined `label`
          res.headlines.filter(headline => !!headline.label.trim())
        )
      );
      return iif(
        () => !!emptyHeadlines.length,
        deletes$, // <-- execute delete only if there are empty headlines 
        of(res)   // <-- if not forward the response
      );
    })
  ).subscribe(
    (res: IRes) => this.headlines = res.headlines,
    (error: any) => console.log(error)
  );
}