Rxjs - Observables

1. Observable是惰性的，只有被订阅时才会调用。
   👇创建一个observable对象，分别推送值1,2,3

const observable = new Observable((subscriber) => {
  subscriber.next(1);
  subscriber.next(2);
  subscriber.next(3);
  setTimeout(() => {
    subscriber.next(4);
  }, 1000);
});

只写上面这段代码，不会执行内部的next。只有订阅observable的时候才会执行👇

 observable.subscribe((value)=>{
   console.log(value)
 })

控制台结果

1
2
3
4 // 1s后打印

2. complete()终止数据的发送

const observable = new Observable((subscriber) => {
  let index = 0;
  setInterval(() => {
    subscriber.next(index);
    if(index === 3) {
      subscriber.complete();
    }
  }, 1000);
});

👆当执行到subscriber.complete();, subscriber.next(index);不会再执行。（但定时器还是存在的吼，记得清除）

3. Observable是多播的。可以有N个订阅者，每次订阅都会执行👇

  const foo = new Observable((subscriber) => {
    subscriber.next(42);
  });
   
  foo.subscribe((x) => {
  console.log(x);
  });
  foo.subscribe((y) => {
  console.log(y);
  });

控制台👇

42
42

4. observable可以同步/异步的交付值
   同步👇

  const foo = new Observable((subscriber) => {
    subscriber.next(42);
    subscriber.next(100); // "return" another value
    subscriber.next(200); // "return" yet another
  });
   
  console.log('before');
  foo.subscribe((x) => {
  console.log(x);
  });
  console.log('after');

控制台👇

before
42
100
200
after

异步👇

  const foo = new Observable((subscriber) => {
    subscriber.next(42);
    subscriber.next(100);
    subscriber.next(200);
    setTimeout(() => {
      subscriber.next(300); // happens asynchronously
    }, 1000);
  });
   
  console.log('before');
  foo.subscribe((x) => {
    console.log(x);
  });
  console.log('after');

控制台👇

before
42
100
200
after
300

5. error()发送 JavaScript 错误或异常。

  const observable = new Observable(function subscribe(subscriber) {
    try {
      subscriber.next(1);
      subscriber.next(2);
      subscriber.next(3);
      subscriber.complete();
    } catch (err) {
      subscriber.error(err); // delivers an error if it caught one
    }
  });

6. unsubscribe()取消正在执行的订阅

const observable = from([10, 20, 30]); 
const subscription = observable.subscribe((x) => console.log(x)); 
// Later:
subscription.unsubscribe();

参考：RxJS - Observable

`