Angular api 调用：Observable 与 Promise

Question

我有这个服务调用 API 来获取一堆电影描述和 returns 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 上的方法不 return 个发出多个值的可观察对象。请注意，可观察的 API 确实保留了这种可能性。您可以深入 the relevant source 了解更多信息。

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

a http.get observable 来检索电影
用户在输入字段中输入，可能 piped 通过 debounce
将其与 http.post 结合查询备选电影
combineLatest 所有这些，可能 pipe 通过 debounce 或 distinctUntilChanged 在正确的时间进行 UI 更新
等等

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

说了这么多，我有时会做您描述的事情并“简化”服务，使其成为 return 承诺而不是可观察的。但在大多数情况下，一开始这似乎是个好主意，但以后会让事情变得更难。

Angular api 调用：Observable 与 Promise

Angular api call: Observable vs Promise

promise

observable

angular-promise

angular

rxjs-observables