Angular 承诺和可观察之间有什么区别？

在角度上，

Promise

和

observeable

之间有什么区别

---

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

承诺

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

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

当异步操作完成或失败时，

Promise

处理单个事件

注意：有一些

Promise

库支持取消，但ES6

Promise

到目前为止不支持

可观察的

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

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

可观察的

类似于

流

（在许多语言中），允许传递零个或多个事件，其中为每个事件调用回调

通常，

observeable

优于

Promise

，因为它提供了

Promise

等功能。使用

Observable

处理0、1或多个事件并不重要。您可以在每种情况下使用相同的API

可观察的

也比

承诺的

具有可取消的优势。如果不再需要对服务器的HTTP请求或其他昂贵的异步操作的结果，

可观察的
的
订阅
允许取消订阅，而
承诺
最终将调用成功或失败的回调，即使您不再需要它提供的通知或结果

当一个
承诺
立即启动时，一个
可观察的
只有在您订阅时才会启动。这就是为什么观测值被称为懒惰的原因

Observable提供了操作符如
map
，
forEach
，
reduce
。。。类似于数组

还有一些功能强大的操作符，如
retry（）
，或
replay（）
。。。这通常非常方便。

延迟执行允许在通过订阅执行可观察对象之前建立一个操作符链，以进行更具声明性的编程。
承诺
和
可观察对象
都为我们提供了抽象，帮助我们处理应用程序的异步性质。@Günter和@Relu清楚地指出了它们之间的区别

因为一个代码片段胜过千言万语，所以让我们通过下面的示例来更容易地理解它们

谢谢@Christoph Burgdorf的精彩表演


Angular使用Rx.js可观测值代替承诺来处理HTTP

假设您正在构建一个搜索功能，该功能在您键入时会立即显示结果。听起来很熟悉，但这项任务带来了很多挑战


我们不希望每次用户按下一个键时都攻击服务器端点，它应该会给他们带来大量的
HTTP
请求。基本上，我们只想在用户停止输入时点击它，而不是每次按键
对于后续请求，不要使用相同的查询参数来点击搜索端点
处理无序的响应。当我们同时处理多个请求时，我们必须考虑它们以意外顺序返回的情况。假设我们首先键入计算机，停止，请求发出，我们键入汽车，停止，请求发出。现在我们有两个正在处理的请求。不幸的是，为计算机携带结果的请求在为汽车携带结果的请求之后返回

演示将由两个文件组成：
app.ts
和
wikipedia service.ts
。然而，在现实世界中，我们很可能会将事情进一步分解


下面是基于承诺的实现，它不处理所描述的任何边缘情况

wikipedia服务.ts

从'@angular/core'导入{Injectable}；
从'@angular/http'导入{URLSearchParams，Jsonp}；
@可注射（）
导出类维基百科服务{
构造函数（私有jsonp:jsonp）{}
搜索（术语：字符串）{
var search=新的URLSearchParams（）
set（'action'，'opensearch'）；
search.set（'search'，术语）；
set（'format'，'json'）；
返回this.jsonp
.get（'http://en.wikipedia.org/w/api.php?callback=JSONP_CALLBACK“，{search}）
.toPromise（）
。然后（（response）=>response.json（）[1]）；
}
}

我们正在注入
Jsonp
服务，对wikipediaapi发出
GET
请求，并使用给定的搜索词。请注意，我们调用
toPromise
，以便从
可观察的
到
承诺
。最终得到一个
承诺


可见光真正发光的地方

让我们将代码更改为不在每次击键时敲打端点，而是仅在用户停止键入时间400 ms时发送请求

为了展示这样的超能力，我们首先需要得到一个
可观察的
，其中包含用户输入的搜索词。我们可以利用Angular的
formControl
指令，而不是手动绑定到keyup事件。要使用此指令，我们首先需要将
ReactiveFormsModule
导入我们的应用程序模块

app.ts

从'@angular/core'导入{NgModule}；
从“@angular/platform browser”导入{BrowserModule}；
从'@angular/http'导入{JsonpModule}；
从'@angular/forms'导入{ReactiveFormsModule}；
@NGD模块({
导入：[BrowserModule、JsonpModule、ReactiveFormsModule]
声明：[AppComponent]，
引导：[AppComponent]
})
导出类AppModule{}

导入后，我们可以从templa中使用formControl
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);

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

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

const promise = new Promise(resolve => {
  setTimeout(() => {
    resolve("Hello from a Promise!");
  }, 2000);
});

promise.then(value => console.log(value));

const observable = new Observable(observer => {
  setTimeout(() => {
    observer.next('Hello from a Observable!');
  }, 2000);
});

observable.subscribe(value => console.log(value));

const numberPromise = new Promise((resolve) => {
    resolve(5);
    resolve(10);
});

numberPromise.then(value => console.log(value));
// still prints only 5

  const numberObservable = new Observable((observer) => {
        observer.next(5);
        observer.next(10);
    });

numberObservable.subscribe(value => console.log(value));
// prints 5 and 10

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