组合可观察量不进行 HTTP 调用

Question

我有一个带有3个公共方法的服务。它们取决于CCD_ 1的结果。CCD_ 2是返回CCD_ 3的getter。

public createObligation(id: string): Observable<void> {
return this.getObligationsUrl(id).pipe(
map(dossierIds => {
const endpoint = `${this.getObligationsUrl(dossierIds)}/blablabla}`;
return this.http.post(endpoint);
})
);
}

public deleteMortgageObligation(id: string): Observable<void> {
return this.getObligationsUrl(id).pipe(
map(dossierIds => {
const endpoint = `${this.getObligationsUrl(dossierIds)}/blablabla/${id}`;
return this.http.delete(endpoint);
})
);
}
public updateObligation(id: string): Observable<void> {
//..
}
private getObligationsUrl(dossierIds: DossierIds): string {
return this.dossierService.dossierIds.pipe(
map(dossierIds => {
const dossierId = dossierIds.getDossierId();
const moId = dossierIds.getObligationsId();
return `${BASE_URL}/${dossierId}/${OBLIGATIONS_URL}/${moId}`;
}),
);
}

这些方法将用于类似的组件

this.createObligation(123).subscribe(result => {
console.log(result);
})

但是TypeScript在所有3种方法中都给我带来了一个错误，说：

Type 'Observable<Observable<void>>' is not assignable to type 'Observable<void>'. Type 'Observable<void>' is not assignable to type 'void'.

我甚至没有看到我的HTTP请求被触发。我哪里搞错了？

Answer 1

没有进行http调用的原因是您没有订阅内部可观察对象。

1   public deleteMortgageObligation(id: string): Observable<void> {
2     return this.getObligationsUrl(id).pipe(
3       map(dossierIds => {
4         const endpoint = `${this.getObligationsUrl(dossierIds)}/blablabla/${id}`;
5         return this.http.delete(endpoint);
6       })
7     );
8   }

在第5行，您返回了一个observable，但它从未被订阅。因此，第2行返回Observable<Observable<>>。您需要确保这个内部可观察到的内容被订阅到，并且它的结果被推送到流中。

这正是"；高阶映射算子"；是的。他们做以下事情：

1. 将传入值映射到另一个可观察值
2. 订阅它，所以它的值被发送到流中
3. 管理从这些"预订"中取消预订；内部订阅">

在您的情况下，我们可以简单地在#3行使用switchMap，而不是map:

1   public deleteMortgageObligation(id: string): Observable<void> {
2     return this.getObligationsUrl(id).pipe(
3       switchMap(dossierIds => {
4         const endpoint = `${this.getObligationsUrl(dossierIds)}/blablabla/${id}`;
5         return this.http.delete(endpoint);
6       })
7     );
8   }