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

Promise总是异步的，而Observable可以是同步的或异步的。当数据发生变化时，观察者会多次返回数据。Promise只产生一种价值。可观测值是一段时间内多个值的惰性集合。这是一种非常好的异步操作方法。承诺不是懒惰的。可以使用unsubscribe（）取消可观测值。承诺不能取消。

承诺-提供单一的未来价值。不懒惰。无法取消。它要么拒绝，要么解决。

可观察-提供多个未来值。懒惰的可取消。它提供了其他方法，如map、filter和reduce。

Promise和Observables都只处理异步调用。

以下是它们之间的区别：

可观察的

在一段时间内发出多个值在我们订阅Observable之前不会调用可以使用unsubscribe（）方法取消提供映射、forEach、filter、reduce、retry和retryWhen运算符

许诺

一次仅发射一个值调用不带.then和.catch的服务无法取消不提供任何操作员

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方法是理想的。