rxjs observable.pipe(take(1)) vs toPromise

Question

最近我被转移到一个新项目，该项目使用 Angular 6 作为前端框架和用于 REST 服务的 spring。

该项目已经开发了 2 年，我观察到几乎所有使用 angular HttpClient 发出的 HTTP 请求都通过管道从 rxjs 获取过滤器。所有 REST API 只发出一个值。不需要手动取消，也不需要 observables 的惰性属性。

我的直觉是使用 toPromise() 会是一种更好的编码方式。

你有什么想法？

  //customer-service.ts
  constructor(private http: HttpClient) {

  }

  public getCustomers() {
     return http.get('/customers');
  }

  //component.ts
  public ngOnInit() {
      this.customerService.getCustomers().pipe(take(1)).subscribe((customers) => {
           //do some stuff
      })
  }

我建议的方法：

  //customer-service.ts
  constructor(private http: HttpClient) {

  }

  public getCustomers() : Promise<Array<Customer>> {
     return http.get('/customers').toPromise();
  }

  //component.ts
  public ngOnInit() {
      this.customerService.getCustomers().then((customers: Array<Customer>) => {
         //do some stuff
      })
  }

我认为我的方法更好，因为它是强类型的并且更干净。

Answer 1

实际上，接受的答案是误导性的，说将可观察对象转换为承诺就像倒退了一步。相反，它与您的需求有关。 如Angular Documentation中所述：

Observable 区分链接和订阅。 Promise 只有 .then() 子句。这使得 observables 可用于创建复杂的转换配方以供系统的其他部分使用，而不会导致工作被执行。

toPromise() 和 take(1) （或简称为 operator first()）的区别在于 take(1) 在第一个值发出后完成，而 toPromise 等待最后一个发出的值（等待完成的 observable 然后解析发出的最后一个值）。

你可能会感兴趣的 observable 和 promise 之间的另一个区别是 Observable 订阅是可取消的，而 promise 不是。举个具体的例子，假设您的 API /customers 需要时间，但您不再需要结果，然后导航到另一个页面，取消订阅会取消 HTTP 请求。

Answer 2

正如你提到的强类型，我们可以在可观察的方法中做同样的事情。

public getCustomers():Observable<Array<Customer>>  {
     return http.get<Array<Customer>>('/customers');
  }

  //component.ts
  public ngOnInit() {
      this.customerService.getCustomers()
      .pipe(take(1))
      .subscribe((customers: Array<Customer>) => {
       //do some stuff
       });
  }

• 对于带有单个 HttpResponse 的 HttpRequest，您可以依赖 promise 接近。
• 但 HttpRequest 具有多个响应，例如 progress/stream 的 data(blob) 采用 Observable 方法。

尽量使用Observable，熟悉了就不会再选择其他的了。那就试试吧！

Answer 3

我建议继续使用 Observable 方式。

为什么？因为以后会更容易：

• 为计划中的功能构建即将推出的逻辑（如映射、过滤等）
• 使用代码，由于混合使用这两种方法会使其更难读/写

另一方面，您是对的，您的代码比其他人的代码更具可读性，但您也可以将 Observable 更改为与您的一样好（只需为其添加强类型），并且它仍然保留功能和 Observables 的一致性。

Answer 4

从 observables 到 Promise 是退一步。

这就像从保时捷 911 升级到菲亚特 multipla。

所以不，你不应该使用toPromise()，不，你的方式不是“更好”（那是一些自负的伙伴！）

我认为我的方法更好，因为它是强类型的并且更干净。

键入 HTTP 答案不取决于 pormises 或 observables，而是取决于开发人员自己。清洁是一个观点问题，我个人讨厌看到toPromise()s。

您的解决方案的主要缺点是，一旦转换为 Promise，您将无法再通过管道传输任何内容，从而使您的函数变得不那么通用。

但他们的代码也不是最好的。通常这种行为用于存储和缓存，你确定你没有遗漏什么吗？

无论如何，如果不是，我只依赖提供的代码，这将是正确的代码：

public getCustomers() {
  return http.get<Customer[]>('/customers');
}

....

public ngOnInit() {
  this.customerService.getCustomers()
    .subscribe((customers) => {...})
}