30 天精通 RxJS 笔记2

建立 Observable(一)

建立Observable

const { Observable } = rxjs;
var observable = Observable
	.create((observer) => {
		observer.next('Jerry'); // RxJS 4.x 以前的版本用 onNext
		observer.next('Anna');
	})
	
// 订阅这个 observable	
observable.subscribe(function(value) {
	console.log(value);
})

Observable 同时可以处理同步与异步的行为

const { Observable } = rxjs;
var observable = Observable.create( observer => {
  observer.next('11');
  observer.next('22');
  setTimeout(e=>{
    observer.next('33');
  }, 30)
})
console.log('start');
observable.subscribe( val => {
  console.log(val);
})
console.log('end');

会打印出：

start
11
22
end
33

观察者 Observer

三个方法(method)：

• next：每当 Observable 发送出新的值，next 方法就会被调用。
• complete：在 Observable 没有其他的数据可以取得时，complete 方法就会被调用，在 complete 被调用之后，next 方法就不会再起作用。
• error：每当 Observable 内发生错误时，error 方法就会被调用。

订阅一个 Observable 就像是执行一个 function

function subscribe(observer) {
	observer.next('Jerry');
	observer.next('Anna');
}

subscribe({
	next: function(value) {
		console.log(value);
	},
	error: function(error) {
		console.log(error)
	},
	complete: function() {
		console.log('complete')
	}
});

建立 Observable(二)

常用Creation Operator

• create
• of

var source = of('11', '22');

• from

var arr = ['Jerry', 'Anna', 2016, 2017, '30 days'] 
var source = from(arr);
var source = from('Hello');
var source = from(new Promise((resolve, reject) => {
  setTimeout( () => {
    resolve('Hello RxJS!')
  }, 3000)
}));

• fromEvent

var source = fromEvent(document.body, 'click');
source.subscribe({
  next: function (value) {
    console.log(value)
  },
  complete: function () {
    console.log('complete!');
  },
  error: function (error) {
    console.log(error)
  }
});

会一直监听鼠标的点击行为，永远不会执行complete方法

• empty

// 停止
var source = empty();

• never

// 无穷
var source = never();

• throwError

var source = throwError('ool');

• interval

var source = interval(1000);

• timer

// 第一个参数代表要发出第一个值的等待时间(ms)，
// 第二个参数代表第一次之后发送值的间隔时间
var source = timer(1000, 1000);

Subscription

常用于取消执行Observable

var source = timer(1000, 1000);
var subscription = source.subscribe({
  next: function (value) {
    console.log(value)
  },
  complete: function () {
    console.log('complete!');
  },
  error: function (error) {
    console.log('Error', error)
  }
});
setTimeout(() => {
  subscription.unsubscribe();
}, 5000)