Promise和Observables将帮助我们使用JavaScript中的异步功能。它们在许多情况下非常相似，但是，两者之间仍然存在一些差异，承诺是以HTTP调用等异步方式解析的值。另一方面，可观测性处理一系列异步事件。它们之间的主要区别如下：

承诺：

有一条管道通常仅用于异步数据返回不容易取消

可观察：

可取消本质上是可重新测试的，例如重试和retryWhen多个管道中的流数据具有类似数组的操作，如map、filter等可以从其他来源（如事件）创建它们是功能，稍后可以订阅

此外，我为您创建了下图，以直观地显示差异：

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和Observables都只处理异步调用。

以下是它们之间的区别：

可观察的

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

许诺

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

我相信所有其他的答案都会消除你的疑虑。然而，我只是想补充一点，可观测性是基于函数式编程的，我发现它附带的函数非常有用，比如map、flatmap、reduce、zip。web实现的一致性，尤其是当它依赖于API请求时，是一种残酷的改进。

我强烈推荐这个文档，因为它是reactiveX的官方文档，我发现它是最清晰的。

如果你想了解可观测性，我建议你写一篇三部分的文章：http://blog.danlew.net/2014/09/15/grokking-rxjava-part-1/

虽然它是针对RxJava的，但概念是相同的，而且解释得很好。在reactiveX文档中，您拥有每个函数的等效项。您必须查找RxJS。

承诺：

异步事件处理程序-Promise对象表示异步操作的最终完成（或失败）及其结果值。

语法：new Promise（executor）；

例如：

var promise_eg = new Promise(function(resolve, reject) {
  setTimeout(function() {
    resolve('foo');
  }, 300);
});

promise_eg.then(function(value) {
  console.log(value);
  // expected output: "foo"
});

console.log(promise_eg);

关于Promise：

它有一个管道，因此在调用时只返回一次值。它是一个单向处理程序，因此一旦调用，您可能无法取消。可以在when（）和then（）之间使用有用的语法。

观察结果：

可观测值是一段时间内多个值的惰性集合。这是一种非常好的异步操作方法。它可以用具有跨平台支持的rxjs实现，也可以与Angular/React等一起使用。

它的作用类似于流衬垫，可以是多管道。因此，一旦定义，您可以在许多地方订阅以获得返回结果。

语法：从“@reactivex/rxjs”导入*作为Rx；初始化：

Rx.Observable.fromEvent(button, "click"),
Rx.Subject()

etc.

订阅：RxLogger.getInstance（）；

例如：

import { range } from 'rxjs';
import { map, filter } from 'rxjs/operators';

range(1, 200).pipe(
  filter(x => x % 2 === 1),
  map(x => x + x)
).subscribe(x => console.log(x));

由于它支持多管道，您可以在不同的位置订阅结果，

它有比承诺更多的可能性。

用法：

它有更多的可能性，如贴图、过滤器、管道、贴图、concatMap等。

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