在Angular中Promise和Observable之间有什么区别?

每一个例子都有助于理解这两种情况。在什么情况下,我们可以使用每种情况?


当前回答

Promise和Observable都在Angular(typescript)中用于处理异步数据,但它们的用法和行为不同。

承诺:是一次性事件(解决/拒绝)返回单个值(解析或拒绝一次)处理单个异步事件无取消和无插座

用例示例:错误处理和恢复/处理顺序操作/组件间通信

import { HttpClient } from '@angular/common/http';

constructor(private http: HttpClient) {}

fetchData() {
  return new Promise((resolve, reject) => {
    this.http.get('https://api.examplepromise.com/data')
     .toPromise()
     .then(data => resolve(data))
     .catch(error => reject(error));
 });
}

观察结果:一段时间内可以发出多个值的值流只要流处于活动状态,就可以订阅并发出值。处理多个异步事件可以取消并支持socket/mapreducer(ngrx)操作用例示例:监控输入元素的变化/动画和转换/使用RxJS进行集中状态管理/取消用户输入以限制API调用

块引用

import { fromEvent } from 'rxjs';

constructor(private elementRef: ElementRef) {}

  listenToButtonClicks() {
  fromEvent(this.elementRef.nativeElement, 'click')
  .subscribe(event => console.log(event));
 }

其他回答

答案中缺少可观察到的一个缺点。Promise允许使用ES7异步/等待函数。使用它们,您可以像编写同步函数调用一样编写异步代码,因此不再需要回调。Observables做到这一点的唯一可能性是将它们转换为Promise。但当您将它们转换为Promise时,只能再次有一个返回值:

async function getData(){
    const data = await observable.first().toPromise();
    //do stuff with 'data' (no callback function needed)
}

进一步阅读:如何“等待”Rx Observable?

虽然Günter Zöchbauer的回答总体上是好的,但我不认为它强调了在处理角度分量时,您几乎总是希望使用Observable,因为它支持取消。承诺不能取消,即使您的组件被破坏,承诺也会得到解决。Angular倾向于宽容,直到不宽容为止。

例如,对损坏组件的任何手动更改检测都会导致异常:

ngOnInit() {
  // Promise API
  this.service.getData().then(d => {
     this.data = d;
     this.changeDetectorRef.detectChanges();
  });

  // Observable API
  this.service.getData().pipe(takeUntil(this.unsubscribe)).subscribe((d) => {
     this.data = d;
     this.changeDetectorRef.detectChanges();
  });
}

如果您的组件在promise解析之前被销毁,那么在promise被解析时,您将尝试使用已销毁的视图错误。

或者,如果您在takeUntil模式中使用可观测值,那么一旦您的组件被破坏,订阅就会被取消。

这是一个有点做作的例子,但为被破坏的组件执行代码可能会导致错误。

承诺

定义:帮助您异步运行函数,并使用它们的返回值(或异常),但仅在执行时使用一次。不懒惰不可取消(有Promise库支持取消,但ES6 Promise目前还没有)。两个可能的决定是拒绝决定无法重试(promise应该可以访问返回promise的原始函数,该函数具有重试功能,这是一种错误的做法)

可观察到的

定义:帮助您异步运行函数,并在执行时以连续顺序(多次)使用它们的返回值。默认情况下,它是懒惰的,因为随着时间的推移,它会发出值。有很多运算符,简化了编码工作。一个运算符重试可以用于在需要时重试,如果我们需要根据某些条件重试可观察值,也可以使用retryWhen。

注:**RxMarbles.com上提供了操作员列表及其交互式图表**

我刚刚处理了一个问题,Promise是最好的解决方案,我将在这里分享给任何在有用的情况下遇到这个问题的人(这正是我之前寻找的答案):

在Angular2项目中,我有一个服务,它接受一些参数并返回一个值列表来填充表单上的下拉菜单。当表单组件初始化时,我需要使用不同的参数多次调用同一个服务来定义多个不同的下拉菜单,但是如果我只是将所有变量排队来调用该服务,只有最后一个成功,其余的错误都出来了。从数据库提取的服务一次只能处理一个请求。

成功填充所有下拉菜单变量的唯一方法是调用服务,以防止在最后一个请求完成之前处理新请求,Promise/.then机制很好地解决了这个问题。

  fetchValueList(listCode): Promise<any> {
      return this.dataSvc.getValueList(listCode, this.stateSvc.currentContext, this.stateSvc.currentLanguageCode)
          .map(response => response.json())
          .toPromise();
  }

  initializeDropDowns() {
      this.fetchValueList('First-Val-List')
          .then(data => {
              this.firstValList = data;
              return this.fetchValueList('Second-Val-List')
          }).then(data => {
              this.secondValList = data;
              return this.fetchValueList('Third-Val-List')
          }).then(data => {
              this.thirdValList = data;
          })  }

我在组件中定义了函数,然后在ngOnInit中调用initializeDropDowns()。

fetchValueList函数返回Promise,因此第一个调用传递第一个listCode,当Promise解析时,返回值位于.then块中的数据变量中,我们可以将其分配给this.firstValList变量。当函数返回数据时,我们知道服务已经完成,可以使用第二个listCode再次调用,返回值在next.then块中的数据变量中,我们将其分配给this.secondValList变量。

我们可以根据需要将其链接多次,以填充所有变量,在最后一个代码块上,我们只需省略return语句,块就终止了。

这是一个非常具体的用例,其中我们有一个单独的服务,需要在组件初始化时多次调用,并且服务必须完成其获取并返回一个值,然后才能再次调用,但在这种情况下,Promise/.then方法是理想的。

我总结了以下差异,

可观察:

Observable只是一个函数,它接受一个观察者并返回一个函数observer:一个带有下一个错误的对象。Observer允许订阅/取消订阅其数据流,发出下一个值,通知观察者错误和通知观察者流完成情况Observer提供了一个函数来处理下一个值、错误和流结束(UI事件、http响应、带有web套接字的数据)。随着时间的推移使用多个值它可以取消/重试,支持map、filter、reduce等运算符。创建Observable可以是-Observable.create()-返回可在-ObservatorObservable.from()-将数组或可迭代对象转换为-ObservableObservable.fromEvent()-将事件转换为Observable-Observable.fromPromise()-将Promise转换为Observable-Observable.range()-返回指定范围内的整数序列

承诺:

一个承诺代表着一项未来将完成的任务;承诺通过价值来解决;承诺被例外拒绝;不可取消,并返回单个值承诺暴露函数(然后)-然后返回一个新的承诺;-允许基于状态-处理程序保证按照所附的顺序执行;