【Rxjs】Observable VS Promise

https://stackoverflow.com/questions/37364973/what-is-the-difference-between-promises-and-observables Code: https://stackblitz.com/edit/rxjs-pro?file=example-1.ts

20213234-0ea0ca73086a8205

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));    
// 输出 0，1，2, 3, 4, 5......,  每隔1s输出一个111

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

pro.then(value => console.log(value));    
// 只输出 2,  每隔1s输出一个111

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， 完了

Not Lazy VS Lazy Observable: 被订阅的时候才会执行， Promise: 定义的时候就被执行，且只执行一次，不管有没有promise.then
Multiple VS Single subscriber
- Cold Observable 可以有多个订阅者，且订阅者之前是独立的，他们有不同的副本, 每次subscribe都会产生全新的数据序列的数据流。但是有的业务场景希望有多个订阅者，但是只异步操作只执行一次，可以用rxjs提供的share来实现。
- Promise不管有几个then，（异步）操作只执行一次。
执行顺序 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.');

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

xinbaihui / Blog

【Rxjs】Observable VS Promise #41