一个 JavaScript 库，使用可观察量进行反应式编程，处理异步数据调用、回调和基于事件的程序。

Rxjs

在使用RxJS时，`throwError` 是一个用于创建表示错误的 observable 的函数。如果您想要延迟这个错误信号的发出，可以使用 `delay` 操作符来实现。`delay` 操作符可以让源Observable延迟一段指定的时间后发出它的输出。

下面是一个具体的示例，展示如何使用 `delay` 来延迟 `throwError`:

```javascript
import { throwError } from 'rxjs';
import { delay } from 'rxjs/operators';

// 创建一个会立即出错的Observable，但通过delay延迟了1500毫秒发出错误
const delayedError$ = throwError(() => new Error('发生错误！')).pipe(
  delay(1500)
);

// 订阅这个Observable
delayedError$.subscribe({
  next: (value) => console.log(value),
  error: (error) => console.error('捕获到错误:', error.message),
  complete: () => console.log('完成')
});
```

在这个例子中，`throwError` 创建了一个会发出错误的Observable。我们使用 `.pipe(delay(1500))` 来修改这个Observable，使得其在发出错误信号前延迟1500毫秒。当你运行这段代码时，你会发现它会在1.5秒后在控制台上打印出错误信息，而不是立即打印。

这种延迟发出错误的方式可以在很多场景下使用，比如在测试中模拟网络延迟，或者在UI中给用户足够的时间去处理即将到来的错误状态等。

RxJS 如何延迟 throwError ？

在RxJS中，将Promise转化为Observable是一个非常常见的操作，可以使用RxJS提供的工具函数来完成。具体来说，你可以使用`from`这个函数来实现这一转换。`from`函数可以将数组、类数组对象、Promise、迭代器等转化为Observable。

下面是一个将Promise转化为Observable的具体例子：

```javascript
import { from } from 'rxjs';

// 假设我们有一个返回Promise的函数
function fetchData() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('Data loaded');
    }, 1000);
  });
}

// 使用 from 将 Promise 转化为 Observable
const dataObservable = from(fetchData());

// 订阅 Observable 来处理数据
dataObservable.subscribe({
  next(data) {
    console.log(data); // 输出：Data loaded
  },
  error(err) {
    console.error('Something wrong occurred: ' + err);
  },
  complete() {
    console.log('Done');
  }
});
```

在上面的代码中，`fetchData`函数返回一个将在1秒后解析的Promise。我们通过`from`函数把这个Promise转换成Observable，然后通过`subscribe`方法订阅这个Observable，以便当Promise解析后，我们可以接收到数据并进行处理。

使用`from`函数来转换Promise到Observable的方法非常简单且强大，因为它让Promise可以无缝地融入到RxJS的响应式编程模式中，使得对异步操作的处理更加灵活和强大。

如果您使用的是 RxJS 6.0.0：

    import { from } from 'rxjs';
    const observable = from(promise);

1 直接执行/转换
---------

用于[`from`](https://rxjs-dev.firebaseapp.com/api/index/function/from)直接将先前创建的 Promise 转换为 Observable。

    import { from } from 'rxjs';
    
    // getPromise() is called once, the promise is passed to the Observable
    const observable$ = from(getPromise());
    

`observable$`将成为一个**热门的 Observable**，它可以有效地向订阅者重放 Promise 值。

它是一个热门的 Observable，因为生产者（在本例中为 Promise）是在 Observable 外部创建的。多个订阅者将共享同一个 Promise。如果内部 Promise 已得到解决，Observable 的新订阅者将立即获得其值。

2 每个订阅的延迟执行
-----------

使用[`defer`](https://rxjs-dev.firebaseapp.com/api/index/function/defer)Promise 工厂函数作为输入，以推迟 Promise 到 Observable 的创建和转换。

    import { defer } from 'rxjs';
    
    // getPromise() is called every time someone subscribes to the observable$
    const observable$ = defer(() => getPromise());
    

`observable$`将是一个**冷的 Observable**。

它是一个冷的 Observable，因为生产者（Promise）是在 Observable 内部创建的。每个订阅者将通过调用给定的 Promise 工厂函数来创建一个新的 Promise。

这允许您创建一个 Promise `observable$`，而无需立即创建并执行 Promise，也无需与多个订阅者共享此 Promise。每个用户都可以`observable$`有效地进行呼叫`from(promiseFactory()).subscribe(subscriber)`。因此，每个订阅者创建自己的新 Promise 并将其转换为新的 Observable，并将自己附加到这个新的 Observable。

3 不少运营商直接接受承诺
-------------

大多数组合（例如，，，`merge`... `concat`）或转换可观察值（例如，，，， ...）的RxJS 运算符直接接受 Promise `forkJoin`。如果您无论如何都使用其中之一，则不必首先使用包装承诺（但要创建**冷可观察，**您仍然可能需要使用）。`combineLatest``switchMap``mergeMap``concatMap``catchError``from``defer`

    // Execute two promises simultaneously
    forkJoin(getPromise(1), getPromise(2)).pipe(
      switchMap(([v1, v2]) => v1.getPromise(v2)) // map to nested Promise
    )
    

检查[文档](https://rxjs-dev.firebaseapp.com/api)或[实施](https://github.com/ReactiveX/rxjs/tree/master/src/internal)以查看您使用的运算符是否接受`ObservableInput`或`SubscribableOrPromise`。

    type ObservableInput<T> = SubscribableOrPromise<T> | ArrayLike<T> | Iterable<T>;
    // Note the PromiseLike ----------------------------------------------------v
    type SubscribableOrPromise<T> = Subscribable<T> | Subscribable<never> | PromiseLike<T> | InteropObservable<T>;
    

* * *

**`from`和之间的区别`defer`示例：** [https://stackblitz.com/edit/rxjs-6rb7vf](https://stackblitz.com/edit/rxjs-6rb7vf)

    const getPromise = val => new Promise(resolve => {
      console.log('Promise created for', val);
      setTimeout(() => resolve(`Promise Resolved: ${val}`), 5000);
    });
    
    // the execution of getPromise('FROM') starts here, when you create the promise inside from
    const fromPromise$ = from(getPromise('FROM'));
    const deferPromise$ = defer(() => getPromise('DEFER'));
    
    fromPromise$.subscribe(console.log);
    // the execution of getPromise('DEFER') starts here, when you subscribe to deferPromise$
    deferPromise$.subscribe(console.log);
    

`defer`可能是大多数人正在寻找的运算符，因为许多应用程序都依赖 Observables 来保持冷状态并在订阅时触发数据获取。`from`不过，对于某些用例来说，这仍然是一个可行的选择，例如，当您想在某些初始化过程中创建一次 Promise，然后通过将被订阅多次的 Observable 传播其值，但又不想创建和执行再次向每一位订阅者承诺。

尝试这个：

    import 'rxjs/add/observable/fromPromise';
    import { Observable } from "rxjs/Observable";
    
    const subscription = Observable.fromPromise(
        firebase.auth().createUserWithEmailAndPassword(email, password)
    );
    subscription.subscribe(firebaseUser => /* Do anything with data received */,
                           error => /* Handle error here */);
    

[您可以在此处](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#static-method-fromPromise)找到 fromPromise 运算符的完整参考。

将 Promise 转换为 Observable 的正确**模式****`defer`**是使用and**`from`**运算符：

    import { defer, from } from 'rxjs';
        
    const observable$ = defer(() => from(myPromise()));
    

为什么我们需要`defer`运营商？

Promise 是**急切的**，这意味着当被调用时它们会立即触发。这与可观察量的工作方式相反。Observables 是**惰性的**，它们仅在`.subscribe()`被调用时才会被触发。这就是我们需要始终将其包装到运算符中的原因`defer`。操作`from`员不做这项工作，所以`defer`总是需要**的**。

您可以添加一个围绕 Promise 功能的包装器，以将 Observable 返回给观察者。

*   使用**defer()**运算符创建**Lazy** Observable ，它允许您仅在观察者订阅时创建 Observable。

    import { of, Observable, defer } from 'rxjs'; 
    import { map } from 'rxjs/operators';
    
    
    function getTodos$(): Observable<any> {
      return defer(()=>{
        return fetch('https://jsonplaceholder.typicode.com/todos/1')
          .then(response => response.json())
          .then(json => {
            return json;
          })
      });
    }
    
    getTodos$().
     subscribe(
       (next)=>{
         console.log('Data is:', next);
       }
    )

如何将 Promise 转换为 Observable ?

当然，我很乐意回答这个问题。

在RxJS中，`Observable`和`Subject`都是可观察序列的基础构建块，但它们在功能和用法上有一些关键的区别：

### Observable

1. **基本概念**：`Observable`是RxJS提供的一种数据类型，它表示一个可随时间推送值的异步数据流。你可以订阅（subscribe）一个Observable，然后在值到来的时候通过提供的回调函数进行处理。

2. **单向数据流**：`Observable`是单向数据流的，意味着它们可以发射（emit）数据、完成（complete）或者发出错误（error），但是外部是无法直接对Observable发射的数据流进行控制的。

3. **冷Observable**：默认情况下，Observable是冷的（cold），这意味着每一个订阅者都会得到一个独立的数据流。这就是说，Observable在每次有新的订阅者订阅时，都会重新启动数据流。因此，每个订阅者都能看到完整的数据序列。

    **例子**：如果你创建一个基于HTTP请求的Observable，每次调用`.subscribe()`时，都会发起一个新的HTTP请求。

### Subject

1. **基本概念**：`Subject`继承自Observable，因此它既是一个Observable也是一个Observer。这意味着Subject不仅可以像Observable那样发射值，还可以订阅其他Observable。

2. **双向数据流**：与Observable不同，`Subject`可以是多播的（multicast），它可以同时作为数据源和消费者。你可以手动调用`.next()`方法来向所有的订阅者推送新的值，从而允许外部对Subject发射的数据流进行控制。

3. **热Observable**：Subject是热的（hot），这意味着它会共享单个数据流给所有订阅者。不会像冷Observable那样对每个订阅者重新发射数据，而是当一个新的值被推送时，所有的订阅者都能收到这个新值。

    **例子**：如果你有一个WebSocket连接的Subject，那么无论有多少订阅者，数据都是通过同一个WebSocket连接发送和接收的。

### 举例

为了更清楚地理解两者的差异，让我给出一个例子：

假设我们正在构建一个实时股票价格更新系统，对于股票价格的更新，我们可能会使用Subject，因为我们希望所有的订阅者看到同样的价格变动，而不需要为每个订阅者重新获取数据。

而对于用户的个人交易请求，每个请求可能都是独立的，我们可能会为每个请求创建一个新的Observable，以确保每次操作都是独立的而且互不影响。

总结来说，`Observable`适用于单向、独立的数据流，而`Subject`更适合那些需要多播或由外部主动推送数据的场景。

在流编程中有两个主要接口：**Observable**和**Observer**。

**Observable**是针对消费者的，它可以被转换和订阅：

    observable.map(x => ...).filter(x => ...).subscribe(x => ...)
    

**观察者**是用于提供可观察源的接口：

    observer.next(newItem)
    

我们可以使用**Observer创建新的****Observable**：

    var observable = Observable.create(observer => { 
        observer.next('first'); 
        observer.next('second'); 
        ... 
    });
    observable.map(x => ...).filter(x => ...).subscribe(x => ...)
    

或者，我们可以使用一个同时实现**Observable**和**Observer接口的****主题**：

    var source = new Subject();
    source.map(x => ...).filter(x => ...).subscribe(x => ...)
    source.next('first')
    source.next('second')

Observables 按设计是单播的，Subjects 按设计是多播的。

如果您查看下面的示例，您**会发现每个订阅都会收到不同的值，因为可观察量按设计开发为单播。**

    import {Observable} from 'rxjs';
    
    let obs = new Observable<any>(observer=>{
       observer.next(Math.random());
    })
    
    obs.subscribe(res=>{
      console.log('subscription a :', res); //subscription a :0.2859800202682865
    });
    
    obs.subscribe(res=>{
      console.log('subscription b :', res); //subscription b :0.694302021731573
    });
    

如果您希望两个订阅具有相同的值，这可能会很奇怪。

我们可以使用主题来解决这个问题。**主题与事件发射器类似，它不会为每个订阅调用。**考虑下面的例子。

    import {Subject} from 'rxjs';
    
    let obs = new Subject();
    
    obs.subscribe(res=>{
      console.log('subscription a :', res); // subscription a : 0.91767565496093
    });
    
    obs.subscribe(res=>{
      console.log('subscription b :', res);// subscription b : 0.91767565496093
    });
    
    obs.next(Math.random());
    

两个订阅都获得相同的输出值！

**观测值**

1.  它们很冷：当它们至少有一个观察者时，代码就会被执行。
    
2.  创建数据副本：Observable 为每个观察者创建数据副本。
    
3.  单向：观察者不能给 observable(origin/master) 赋值。
    
4.  该代码将为每个观察者运行。如果是 HTTP 调用，则每个观察者都会调用它。
    
5.  如果它是我们想要在所有组件之间共享的服务，它不会有最新结果，所有新订阅者仍然会订阅相同的可观察对象并从头开始获取价值
    
6.  单播意味着可以从 observable 发出值，而不是从任何其他组件发出值。
    

**主题**

1.  它们很热门：即使没有观察者，代码也会被执行并且值也会被广播。
    
2.  共享数据：相同的数据在所有观察者之间共享。
    
3.  双向：观察者可以为 observable（origin/master）赋值。
    
4.  如果使用主题，那么您会错过创建观察者之前广播的所有值。那么重播主题来了
    
5.  多播，可以将值投射给多个订阅者，并且可以充当订阅者和发射者

我发现接受的答案有点令人困惑！

观察者_不是用于提供_**Observable**源的接口，而是用于_观察_**Observable**源的接口……从名称**上看** ，这更有意义，对吧？

那么，原因是：

    var observable = Observable.create(observer => { 
        observer.next('first'); 
        observer.next('second'); 
        ... 
    });
    

工作原理 - 创建一个发出“第一个”然后发出“第二个”的 observable - 的参数是`Observable.create(...)`一个_subscribe 函数_，它基本上定义了哪些**Observer**事件将在该**Observable**的直接**观察者**上发生。

如果您想再深入一点，重要的是要了解订阅函数在订阅时_不会直接在_**观察者**对象上调用，而是由**订阅**对象介导，该对象可以强制执行正确的可观察规则，例如Observable在被调用后永远不会发出新值，即使你的 subscribe 函数看起来好像会发出新值**。**`observer.complete()`

参考： http: [//reactivex.io/rxjs/manual/overview.html#creating-observables](http://reactivex.io/rxjs/manual/overview.html#creating-observables)

一个**Subject**既是一个**Observable**又是一个**Observer**，它_看起来_就像**Observer接口是向****Subject** “提供”事件的方式。但是，如果您意识到一个**Subject**有点像一个**Observable**，具有相当于订阅功能的功能（即您定义观察它的事物将发生什么事件），那么它的命名就更容易理解了，它就位于对象上，即使在它之后已经被创造了。因此，您可以在**主题上调用****观察者**方法来定义观察它的事物将发生什么**观察者事件！**😊（同样，涉及中间对象，以确保您只能执行合法的事情序列。）

参考：http: [//reactivex.io/rxjs/manual/overview.html#subject](http://reactivex.io/rxjs/manual/overview.html#subject)

请参阅 rxjs 文档（那里有更多信息和示例）： [http://reactivex.io/rxjs/manual/overview.html#subject](http://reactivex.io/rxjs/manual/overview.html#subject)

> 什么是主题？RxJS主题是一种特殊类型的Observable，它允许将值多播到许多观察者。普通 Observable 是单播的（每个订阅的观察者都拥有 Observable 的独立执行），而主题是多播的。
> 
> 一个Subject就像一个Observable，但可以多播到许多观察者。主题就像 EventEmitters：它们维护许多侦听器的注册表。

和代码，`Subject`扩展`Observable`：[https://github.com/ReactiveX/rxjs/blob/master/src/internal/Subject.ts#L22](https://github.com/ReactiveX/rxjs/blob/master/src/internal/Subject.ts#L22)

    /**
     * @class Subject<T>
     */
    export class Subject<T> extends Observable<T> implements SubscriptionLike {
    //...
    }

rxjs 中的 Observable 和Subject 有什么区别？,`Observable` 和 `Subject` 都是 RxJS 库中的重要概念，它们用于处理异步事件和基于推送模型的数据流，但它们之间有一些关键区别：

### Observable

- **基础概念**: `Observable` 是 RxJS 中的基础类。它代表一个可观察的序列，可以发出三种类型的事件：值、错误和完成通知。
- **单播性质**: `Observable` 是单播的，这意味着对于每个订阅者，`Observable` 都会独立执行。如果你有多个订阅者，每个订阅者都会观察到独立的事件序列。
- **惰性运行**: `Observable` 在默认情况下是惰性的，也就是说，它只有在有订阅者时才开始执行。这与函数调用类似，只有当你调用它时，它才会运行。
- **操作符**: `Observable` 可以使用各种 RxJS 提供的操作符进行转换、合并、过滤等操作。

### Subject

- **特殊的 Observable**: `Subject` 是一种特殊类型的 `Observable`，它允许将值多播给多个观察者。这意味着当一个 `Subject` 发出一个事件时，所有的订阅者都会接收到相同的事件。
- **观察者身份**: `Subject` 也实现了 `Observer` 接口，这使它可以作为数据源，你可以明确地调用 `next(value)`、`error(e)` 和 `complete()` 方法来发出事件，这是普通 `Observable` 无法做到的。
- **热数据流**: 由于 `Subject` 是多播的，它通常代表“热”数据流。一旦值被发出，不论是否存在订阅者，该值可能会丢失。如果后来有新的订阅者，它们可能会错过之前发出的事件。
- **变种**: `Subject` 有几个变种，包括 `BehaviorSubject`、`ReplaySubject` 和 `AsyncSubject`，它们具有不同的行为特性，比如能够缓存值。

### 对比总结

- **多播与单播**: `Observable` 是单播，每个订阅者都有独立的执行上下文；而 `Subject` 是多播，多个观察者共享同一事件流。
- **主动与被动**: `Subject` 可以主动发出事件，而 `Observable` 是被动的，它通过操作符或者创建函数来发出事件。
- **热与冷**: `Observable` 通常用于表示冷数据流，而 `Subject` 表示热数据流。

在实际应用中，选择使用 `Observable` 还是 `Subject` 取决于你的特定需求，比如是否需要多播、是否需要主动控制事件的发出等。

`Observable` 和 `Subject` 都是 RxJS 库中的重要概念，它们用于处理异步事件和基于推送模型的数据流，但它们之间有一些关键区别：

### Observable

- **基础概念**: `Observable` 是 RxJS 中的基础类。它代表一个可观察的序列，可以发出三种类型的事件：值、错误和完成通知。
- **单播性质**: `Observable` 是单播的，这意味着对于每个订阅者，`Observable` 都会独立执行。如果你有多个订阅者，每个订阅者都会观察到独立的事件序列。
- **惰性运行**: `Observable` 在默认情况下是惰性的，也就是说，它只有在有订阅者时才开始执行。这与函数调用类似，只有当你调用它时，它才会运行。
- **操作符**: `Observable` 可以使用各种 RxJS 提供的操作符进行转换、合并、过滤等操作。

### Subject

- **特殊的 Observable**: `Subject` 是一种特殊类型的 `Observable`，它允许将值多播给多个观察者。这意味着当一个 `Subject` 发出一个事件时，所有的订阅者都会接收到相同的事件。
- **观察者身份**: `Subject` 也实现了 `Observer` 接口，这使它可以作为数据源，你可以明确地调用 `next(value)`、`error(e)` 和 `complete()` 方法来发出事件，这是普通 `Observable` 无法做到的。
- **热数据流**: 由于 `Subject` 是多播的，它通常代表“热”数据流。一旦值被发出，不论是否存在订阅者，该值可能会丢失。如果后来有新的订阅者，它们可能会错过之前发出的事件。
- **变种**: `Subject` 有几个变种，包括 `BehaviorSubject`、`ReplaySubject` 和 `AsyncSubject`，它们具有不同的行为特性，比如能够缓存值。

### 对比总结

- **多播与单播**: `Observable` 是单播，每个订阅者都有独立的执行上下文；而 `Subject` 是多播，多个观察者共享同一事件流。
- **主动与被动**: `Subject` 可以主动发出事件，而 `Observable` 是被动的，它通过操作符或者创建函数来发出事件。
- **热与冷**: `Observable` 通常用于表示冷数据流，而 `Subject` 表示热数据流。

在实际应用中，选择使用 `Observable` 还是 `Subject` 取决于你的特定需求，比如是否需要多播、是否需要主动控制事件的发出等。

在RxJS中，`Observable`和 `Subject`都是可观察序列的基础构建块，但它们在功能和用法上有一些关键的区别：  

### Observable

1. **基本概念**：`Observable`是RxJS提供的一种数据类型，它表示一个可随时间推送值的异步数据流。你可以订阅（subscribe）一个Observable，然后在值到来的时候通过提供的回调函数进行处理。
2. **单向数据流**：`Observable`是单向数据流的，意味着它们可以发射（emit）数据、完成（complete）或者发出错误（error），但是外部是无法直接对Observable发射的数据流进行控制的。
3. **冷Observable**：默认情况下，Observable是冷的（cold），这意味着每一个订阅者都会得到一个独立的数据流。这就是说，Observable在每次有新的订阅者订阅时，都会重新启动数据流。因此，每个订阅者都能看到完整的数据序列。

   **例子**：如果你创建一个基于HTTP请求的Observable，每次调用 `.subscribe()`时，都会发起一个新的HTTP请求。

### Subject

1. **基本概念**：`Subject`继承自Observable，因此它既是一个Observable也是一个Observer。这意味着Subject不仅可以像Observable那样发射值，还可以订阅其他Observable。
2. **双向数据流**：与Observable不同，`Subject`可以是多播的（multicast），它可以同时作为数据源和消费者。你可以手动调用 `.next()`方法来向所有的订阅者推送新的值，从而允许外部对Subject发射的数据流进行控制。
3. **热Observable**：Subject是热的（hot），这意味着它会共享单个数据流给所有订阅者。不会像冷Observable那样对每个订阅者重新发射数据，而是当一个新的值被推送时，所有的订阅者都能收到这个新值。

   **例子**：如果你有一个WebSocket连接的Subject，那么无论有多少订阅者，数据都是通过同一个WebSocket连接发送和接收的。

### 举例

为了更清楚地理解两者的差异，让我给出一个例子：

假设我们正在构建一个实时股票价格更新系统，对于股票价格的更新，我们可能会使用Subject，因为我们希望所有的订阅者看到同样的价格变动，而不需要为每个订阅者重新获取数据。

而对于用户的个人交易请求，每个请求可能都是独立的，我们可能会为每个请求创建一个新的Observable，以确保每次操作都是独立的而且互不影响。

总结来说，`Observable`适用于单向、独立的数据流，而 `Subject`更适合那些需要多播或由外部主动推送数据的场景。

RxJS 的 Observable 和 Subject 有什么区别？

`Promise` 和 `Observable` 在异步编程中都很常见，尤其是在 JavaScript 和基于 JavaScript 的框架（如 Angular）中。尽管它们处理异步操作，但它们的工作方式和功能有所不同。以下是它们之间的一些主要区别：

### 1. 单值 vs 多值

- **Promise**:
  - Promise 代表一个异步操作的最终结果。它只处理单个异步操作并返回一个单一的值。
- **Observable**:
  - Observable 可以发出多个值，是一个流式数据集合。它可以发出零个到多个值，并且可以随着时间无限地进行。

### 2. 惰性 vs 主动

- **Promise**:
  - Promises 是不惰性的，这意味着一旦创建，它们立即执行。
- **Observable**:
  - Observables 是惰性的。Observable 执行（称为订阅）只有在有订阅者时才会开始。

### 3. 取消

- **Promise**:
  - 一旦启动，Promise 就无法取消。它要么解析一个值，要么拒绝一个错误。
- **Observable**:
  - Observables 可以被取消。订阅者可以取消订阅，这样操作就可以停止执行。

### 4. 操作符

- **Promise**:
  - Promise 在本身具有有限的操作方法，例如 `.then()`, `.catch()`, 和 `.finally()`。
- **Observable**:
  - Observable 支持广泛的操作符，如 `map()`, `filter()`, `concat()`, `flatMap()`, 等等，可以使用这些操作符来处理流中的数据。

### 5. 错误处理

- **Promise**:
  - 在 Promise 中，错误通过拒绝来处理，可以用 `.catch()` 方法来捕获。
- **Observable**:
  - 在 Observable 中，错误可以在流的任何部分被捕获，并可以使用特殊的错误处理操作符。

### 6. 使用场景

- **Promise**:
  - Promises 通常用于单一异步任务，当你对一次性事件感兴趣时使用。
- **Observable**:
  - Observables 更适合处理时间序列中的数据、用户输入、HTTP请求等，尤其是当涉及多个值或你想要处理如取消或连续的数据流时。

总的来说，Promise 更适合简单的异步转换，而 Observable 提供了更强大的控制，适用于复杂的数据流和异步事件的处理。

**承诺**

当异步操作完成或失败时，A`Promise`处理**单个事件。**

注意：有些`Promise`库支持取消，但 ES6`Promise`到目前为止还不支持。

**可观察的**

An`Observable`就像 a **`Stream`**（在许多语言中）一样，允许您传递零个或多个事件，其中为每个事件调用回调。

通常`Observable`更受青睐，`Promise`因为它提供了以下功能`Promise`以及更多功能。有了`Observable`它，无论您想处理 0 个、1 个还是多个事件都没有关系。您可以在每种情况下使用相同的 API。

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

a 会`Promise`立即启动，而 a`Observable`仅在您订阅后才会启动。这就是 Observables 被称为惰性的原因。

Observable 提供类似于数组的**运算符**，如`map`, `forEach`, , ...`reduce`

还有一些强大的运算符，例如`retry()`, 或`replay()`, ... 通常非常方便。 [rxjs 附带的运算符列表](https://rxjs-dev.firebaseapp.com/guide/operators)

延迟执行允许您在通过订阅执行可观察量之前构建运算符链，以进行更具声明性的编程。

和`Promises`都`Observables`为我们提供了抽象，帮助我们处理应用程序的**异步特性。**[Günter](https://stackoverflow.com/questions/37364973/what-is-the-difference-between-promises-and-observables/37365955#37365955)和 @Relu清楚地指出了它们之间的区别。

由于代码片段相当于一千个单词，让我们通过下面的示例来更容易地理解它们。

> 感谢@Christoph Burgdorf 的[精彩文章](http://blog.thoughtram.io/angular/2016/01/06/taking-advantage-of-observables-in-angular2.html)

* * *

Angular 使用 Rx.js Observables 而不是 Promise 来处理 HTTP。

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

*   我们不想每次用户按键时都访问服务器端点。它应该用大量的[HTTP](https://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol)请求淹没它们。基本上，我们只想在用户停止打字时点击它，而不是每次击键时点击它。
*   不要为后续请求使用**相同的查询参数**来访问搜索端点。
*   处理无序响应。当我们同时处理多个请求时，我们必须考虑它们以意外顺序返回的情况。想象一下，我们首先输入**Computer**，停止，一个请求发出，我们输入**car**，停止，一个请求发出。现在我们有两个请求正在处理中。**不幸的是，携带计算机**结果的请求在携带**汽车**结果的请求之后返回。

该演示仅包含两个文件：`app.ts`和`wikipedia-service.ts`. 不过，在现实世界中，我们很可能会进一步拆分事物。

* * *

下面是一个**基于 Promise 的**实现，它不处理任何所描述的边缘情况。

`wikipedia-service.ts`

    import { Injectable } from '@angular/core';
    import { URLSearchParams, Jsonp } from '@angular/http';
    
    @Injectable()
    export class WikipediaService {
      constructor(private jsonp: Jsonp) {}
    
      search (term: string) {
        var search = new URLSearchParams()
        search.set('action', 'opensearch');
        search.set('search', term);
        search.set('format', 'json');
        return this.jsonp
                    .get('http://en.wikipedia.org/w/api.php?callback=JSONP_CALLBACK', { search })
                    .toPromise()
                    .then((response) => response.json()[1]);
      }
    }
    

我们正在注入服务，以使用给定的搜索词向**维基百科 API**`Jsonp`发出[GET请求。](https://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol#Request_methods)请注意，我们调用是为了从 an到 a 。最终以 a作为我们搜索方法的返回类型。`toPromise``Observable<Response>``Promise<Response>``Promise<Array<string>>`

`app.ts`

    // check the plnkr for the full list of imports
    import {...} from '...';
    
    @Component({
      selector: 'my-app',
      template: `
        <div>
          <h2>Wikipedia Search</h2>
          <input #term type="text" (keyup)="search(term.value)">
          <ul>
            <li *ngFor="let item of items">{{item}}</li>
          </ul>
        </div>
      `
    })
    export class AppComponent {
      items: Array<string>;
    
      constructor(private wikipediaService: WikipediaService) {}
    
      search(term) {
        this.wikipediaService.search(term)
                             .then(items => this.items = items);
      }
    }
    

这里也没有太多惊喜。我们`WikipediaService`通过搜索方法向模板注入并公开其功能。该模板只是绑定到**keyup**并调用`search(term.value)`.

**我们解开 WikipediaService 的搜索方法返回的Promise**的结果，并将其作为简单的字符串数组公开给模板，以便我们可以`*ngFor`循环遍历它并为我们构建一个列表。

[请参阅Plunker](http://plnkr.co/edit/8ap1Lm?p=preview)上**基于 Promise**的实现示例[](http://plnkr.co/edit/8ap1Lm?p=preview)

* * *

**Observables**真正闪耀的地方

**让我们更改代码，以便每次击键时不再敲击端点，而是仅在用户停止输入400 毫秒**时发送请求

为了揭示这样的超能力，我们首先需要获取一个`Observable<string>`带有用户输入的搜索词的 。我们可以利用 Angular 的`formControl`指令，而不是手动绑定到 keyup 事件。要使用此指令，我们首先需要将其导入`ReactiveFormsModule`到我们的应用程序模块中。

`app.ts`

    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { JsonpModule } from '@angular/http';
    import { ReactiveFormsModule } from '@angular/forms';
    
    @NgModule({
      imports: [BrowserModule, JsonpModule, ReactiveFormsModule]
      declarations: [AppComponent],
      bootstrap: [AppComponent]
    })
    export class AppModule {}
    

导入后，我们可以在模板中使用 formControl 并将其设置为名称“term”。

    <input type="text" [formControl]="term"/>
    

`FormControl`在我们的组件中，我们创建一个from实例`@angular/form`，并将其公开为组件上名称 term 下的字段。

在幕后，**term**自动公开一个我们可以订阅的`Observable<string>`as 属性。`valueChanges`现在我们有了一个`Observable<string>`，克服用户输入就像调用`debounceTime(400)`我们的`Observable`. 这将返回一个新值`Observable<string>`，只有在 400 毫秒内没有出现新值时才会发出新值。

    export class App {
      items: Array<string>;
      term = new FormControl();
      constructor(private wikipediaService: WikipediaService) {
        this.term.valueChanges
                  .debounceTime(400)        // wait for 400 ms pause in events
                  .distinctUntilChanged()   // ignore if next search term is same as previous
                  .subscribe(term => this.wikipediaService.search(term).then(items => this.items = items));
      }
    }
    

如果我们的应用程序已经显示了结果，那么再发送一个搜索词请求会浪费资源。要实现所需的行为，我们所要做的就是`distinctUntilChanged`在调用后立即调用操作员`debounceTime(400)`

[请参阅Plunker](http://embed.plnkr.co/SIltBL/)上**Observable**实现的示例[](http://embed.plnkr.co/SIltBL/)

> 对于处理无序响应，请查看完整文章 [http://blog.thoughtram.io/angular/2016/01/06/take-advantage-of-observables-in-angular2.html](http://blog.thoughtram.io/angular/2016/01/06/taking-advantage-of-observables-in-angular2.html)

就我在 Angular 中使用 HTTP 而言，我同意在正常用例中使用 Observable 与 Promise 没有太大区别。这些优点在实践中都没有真正相关。我希望将来能看到一些高级用例:)

* * *

> 了解更多
> 
> *   [https://angular-2-training-book.rangle.io/handout/observables/](https://angular-2-training-book.rangle.io/handout/observables/)
> *   [https://angular.io/tutorial/toh-pt6#observables](https://angular.io/tutorial/toh-pt6#observables)

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

**承诺：**  

*   拥有一条管道
*   通常仅与异步数据返回一起使用
*   不容易取消

**可观察到：**  

*   可以取消
*   本质上是可重试的，例如 retry 和 retryWhen
*   在多个管道中传输数据
*   具有类似数组的操作，如映射、过滤器等
*   可以从事件等其他来源创建
*   它们是函数，可以稍后订阅

另外，我在下面为您创建了图形图像，以直观地显示差异：

[![承诺和观察图像](https://i.stack.imgur.com/Ewn3b.png)](https://i.stack.imgur.com/Ewn3b.png)

答案中缺少 Observables 的一个缺点。Promise 允许使用 ES7 async/await 函数。使用它们，您可以编写异步代码，就像同步函数调用一样，因此您不再需要回调。Observables 做到这一点的唯一可能性是将它们转换为 Promise。但是当你将它们转换为 Promise 时，你只能再有一个返回值：

    async function getData(){
        const data = await observable.first().toPromise();
        //do stuff with 'data' (no callback function needed)
    }
    

进一步阅读：[如何在 Rx Observable 上“await”？](https://stackoverflow.com/questions/34190375/how-can-i-await-on-an-rx-observable)

**承诺**

1.  定义：帮助您异步运行函数，并使用它们的返回值（或异常），但**仅**在执行时使用一次。
2.  不懒惰
3.  不可取消（有 Promise 库支持取消，但 ES6 Promise 到目前为止还不支持）。两个可能的决定是
    *   拒绝
    *   解决
4.  无法**重试**（Promise 应该有权访问返回 Promise 的原始函数以具有重试功能，这是一个不好的做法）

**观测值**

1.  定义：帮助您异步运行函数，并在执行时连续（**多次**）使用它们的返回值。
2.  默认情况下，它是_惰性的_，因为它会随着时间的推移而发出值。
3.  有很多运算符，简化了编码工作。
4.  可以使用一个运算符**重试**来在需要时重试，如果我们需要根据某些条件重试可观察对象，也可以使用**retryWhen 。**

**注意**：操作员列表及其交互图可在[\*\*RxMarbles.com](http://rxmarbles.com/) \*\*上找到

Rxjs相关问题

RxJS 如何延迟 throwError ？

如何将 Promise 转换为 Observable ?

RxJS 的 Observable 和 Subject 有什么区别？

Promise 和 Observables 有什么区别？