Promise在异步操作完成或失败时处理单个事件。

承诺在应用程序中自动执行，而可观测则是惰性的。所以我们必须订阅可观测值以返回数据。

我们不能取消订阅承诺。与可取消订阅的Observables相比，它们每次都会执行。

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]);
    });

以下是承诺和可观察性的一些重要区别。

许诺

仅发射单个值不可取消不可共享始终异步

可观察的

发出多个值仅在调用或有人订阅时执行可以取消可以由多个订阅者共享和订阅该共享值。所有订阅者都将在一个时间点执行。可能是异步的

为了更好地理解，请参阅https://stackblitz.com/edit/observable-vs-promises

许诺

Promise在异步操作完成或失败时处理单个事件。

注意：有Promise库支持取消，但ES6 Promise目前还没有。

可观察的

Observable就像一个流（在许多语言中），允许传递零个或多个事件，并为每个事件调用回调。

与Promise相比，Observable通常更受欢迎，因为它提供了Promise等特性。使用Observable，无论您想处理0、1或多个事件。您可以在每种情况下使用相同的API。

Observable也比Promise具有可取消的优势。如果不再需要对服务器的HTTP请求或其他昂贵的异步操作的结果，则Observable的Subscription允许取消订阅，而Promise最终将调用成功或失败回调，即使您不再需要通知或它提供的结果。

当Promise立即启动时，Observable只有在您订阅它时才会启动。这就是为什么Observable被称为lazy。

Observable提供了map、forEach、reduce等运算符。。。类似于阵列

还有一些强大的运算符，如retry（）或replay（）。。。这通常很方便。rxjs附带的操作员列表

惰性执行允许在通过订阅执行可观察到的操作之前建立一个运算符链，以进行更具声明性的编程。

Observables和Promise帮助我们使用JavaScript/TypeScript中的异步功能。它们在许多情况下非常相似，但它们之间仍有一些差异。

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