Angular api call: Observable vs Promise

Question

我有一个服务，它调用API来获得一组电影描述，并返回一个Observable：

getNowPlayingMovies$(page: number, country?: string): Observable<NowPlaying> {
console.log(`${this.baseUrl}${this.now_playing}?${this.key}&region=${country || 'US'}&page=${page}`);
return this.http.get<NowPlaying>(
`${this.baseUrl}${this.now_playing}?${this.key}&region=${country || 'US'}&page=${page}`
);
}

在使用上面这个函数的组件上，我称之为每次页面值都在更改，这样我就可以在组件视图上为用户提供分页。

这就是调用服务的组件：

getNowPlayingMovies(): void {
this.nowPlayingService.getNowPlayingMovies$(this.page).subscribe((data) => {
this.nowPlaying.push(
...data.results.filter((result) => result.backdrop_path)
);
if(!this.last_page){
this.last_page = data.total_pages
this.page++;
} else if(this.page <= data.total_pages) {
this.page++;
}
console.log(data);
console.log(this.nowPlaying);
});
}

我在Angular上读到过，你应该总是尝试使用Observable而不是Promises，但在这样的场景中，我认为订阅api调用响应没有任何好处。

将服务中的Observable转换为这样的Promise是正确的吗？

getNowPlayingMovies$(page: number, country?: string): Promise<NowPlaying> {
console.log(`${this.baseUrl}${this.now_playing}?${this.key}&region=${country || 'US'}&page=${page}`);
return this.http.get<NowPlaying>(
`${this.baseUrl}${this.now_playing}?${this.key}&region=${country || 'US'}&page=${page}`
).toPromise();
}

我正在学习Angular，我正在努力将其添加到我的投资组合中，所以我想学会以正确的方式和最好的方式来做。

Answer 1

这不会是不正确的，如：它会工作的。

在转换为Promise时，您确实释放了一些功能，但最重要的一个通常是不相关的：根据我的经验，http上的方法不会返回发出多个值的可观测值。请注意，可观察到的API确实保留了这种可能性。你可以深入相关来源了解更多信息。

许多资源可能仍然建议您使用可观察性的一个原因是，Angular中的许多其他功能都是或可以/应该使用可观察性构建的。考虑使用反应式表单，组合多个http请求、用户事件等。如果你坚持对所有这些表单使用可观察性，RxJs为你提供了强大的(但可以说是复杂和/或复杂的(组合方法。例如：

• 一个可观测的http.get来检索电影
• 用户在输入字段中键入，可能是piped到debounce
• 将其与http.post组合以查询备选电影
• combineLatest所有这些以及可能的pipe通过debounce或distinctUntilChanged在正确的时间进行UI更新
• 等等

当您立即将http调用转换为Promise<T>时，构建所有这些交互将是一堆额外的工作，甚至可能感觉不习惯。

说了这么多，我有时也会做你描述的事情，"；简化的"；一个服务，使其返回承诺而不是可观察的。但在大多数情况下，一开始这似乎是个好主意，以后会让事情变得更困难。