【Rxjs二】Observable VS Promise

[xinbaihui]

相同点： 状态变化一致： Normal to error/complete， Normal to resolved/reject

不同点：

1. Multiple VS Single events/values
   Promise只能resolve一个值，Observable可以0个或者多个。通常Http的请求只需要一个响应值，但是某些其他情况需要响应多个值。
   • setInterval
   • websocket
   • DOM events

const obs = new Observable((observer) => {
      let i = 0;
      setInterval(() => {
          console.log(111);
          observer.next(i++);
      }, 1000);
}); // 等价于 Rxjs的 interval(1000)
    
obs.subscribe(value => console.log(value));    
// 输出 111, 0，111, 1111, 2, 111, 3 ......

const pro = new Promise((observer) => {
      let i = 2;
      setInterval(() => {
          console.log(111);
          resolve(i++);
      }, 1000);
});
    
pro.then(value => console.log(value));    
// 111, 2, 111, 111, 111...

2. Not Lazy VS Lazy
   Observable: 构造函数的onSubcribe函数不会立刻执行，被订阅的时候才执行，
   Promise: 定义的时候构造函数会立刻执行，且只执行一次，不管有没有promise.then

3. 异步&同步 VS 只能异步
   Promise.then(resolver)中注册的回调会进入到宏任务列表，所以必定异步。
   Observable.subscribe(observer)中注册的回调会在本宏任务中直接执行。

const observable = new Observable((observer) => {
    // observer.next(5);  // 输出是  5！ And now we are here.
    setTimeout(() => {   //  输出是  And now we are here.  5!
        observer.next(5);
    })
});

observable.subscribe(value => console.log(value + '!'));
console.log('And now we are here.');

4. Cancelable VS Not Cancelable
   上例中Observable可以被cancel，方法如下。Promise不可以，一旦resolve，then中注册的回调函数就会被执行

const subscription = obs.subscribe(value => console.log(value));  
setTimeout(() => {
  console.log('unsub')
  subscription.unsubscribe();
}, 3000)
// 输出 0， 1， 2， unsub， 完了

5. Multiple VS Single subscriber

• Cold Observable 可以有多个订阅者，且订阅者之前是独立的，他们有不同的副本, 每次subscribe都会产生全新的数据序列的数据流。
  但是有的业务场景希望有多个订阅者，但是只异步操作只执行一次，可以用rxjs提供的share来实现。
• Promise不管有几个then， 操作只执行一次。

6. 操作符
   Observable提供多个其他操作符 map，forEach，reduce，debounce等，Promise没有。