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

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


当前回答

关于这个话题已经有很多答案了,所以我不会再赘述。

但是对于刚开始学习Observable/Aangular并想知道与Promise相比使用哪一个的人来说,我建议您将所有内容都保持Observable,并将项目中所有现有的Promise转换为Observable。

因为Angular框架本身及其社区都在使用Observable。因此,当您集成框架服务或第三方模块并将所有内容链接在一起时,这将是有益的。


当然,没有任何意见在所有情况下都是100%正确的,但至少我认为98%的时间是在Angular框架中实现的常规商业项目,Observable是正确的选择。

即使你在开始你的简单爱好项目时不喜欢它,你很快就会意识到你在Angular中与之交互的几乎所有组件,而且大多数Angular友好的第三方框架都使用Observables,然后你会不断地将Promise转换为Observable,以便与它们进行通信。

这些组件包括但不限于:HttpClient、表单生成器、Angular材质模块/对话框、Ngrx存储/效果和ngx引导。

事实上,我在过去两年中处理的Angular生态系统中唯一的Promise是APP_INITIALIZER。

其他回答

Promise发出单个值,Observable发出多个值。因此,在处理HTTP请求时,Promise可以管理同一请求的单个响应,但是如果同一请求有多个响应,那么我们就必须使用Observable。是的,Observable可以处理同一请求的多个响应。

许诺

const promise = new Promise((data) =>
{ data(1);
  data(2);
  data(3); })
.then(element => console.log(‘Promise ‘ + element));

输出

Promise 1

可观察的

const observable = new Observable((data) => {
data.next(1);
data.next(2);
data.next(3);
}).subscribe(element => console.log('Observable ' + element));

输出

Observable 1
Observable 2
Observable 3

Promise:是一个ES6特性,它处理在创建时立即执行的异步代码,该代码当时只能发出一个值,并且不可取消。随着现代应用程序和功能需求的复杂性,如果我们要同时执行多个承诺,或者在执行之前进行过滤或进行一些转换,那么就必须实现复杂的代码:

myPromise.then((resolvedValue) => {
    console.log(resolvedValue);
}, (error) => {
    console.log(error);
});

Observable:是Rxjs库提供的一个Object,它帮助我们处理JavaScript应用程序中的反应式编程,它提供链接和订阅来处理复杂的应用程序,具有可取消的优点,同时提供许多值。此外,我们还可以从应用其他运算符(如retry()、map()、filter()、switchMap()等)的链接中获益,这有助于处理复杂的用例和繁重的用户界面。

即时搜索示例:

search(terms: Observable<string>) {
    return terms.pipe(
      debounceTime(400),
      distinctUntilChanged(),
      switchMap((term) => this.searchEntries(term))
    );
  }

并行的许多APIS调用示例:

let character = this.http.get('https://jsonplaceholder.typicode.com/todos');
    let characterHomeworld = this.http.get(
      'https://jsonplaceholder.typicode.com/posts'
    );

    forkJoin([character, characterHomeworld]).subscribe((results) => {
      console.log('result °', results[0]);
      console.log('result 1', results[1]);
    });

虽然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模式中使用可观测值,那么一旦您的组件被破坏,订阅就会被取消。

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

承诺:

提供单一的未来价值;不懒惰;不可撤销;

可观察:

随时间推移发出多个值;懒惰的可取消;支持map、filter、reduce和类似运算符

如果愿意,可以在Angular中调用HTTP时使用promise而不是observables。

我刚刚处理了一个问题,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方法是理想的。