为啥会有Observable
为啥会有Observable？ 说是弥补关于数据处理场景的一块空白 -> 推送多个数据
这就比较抽象啊， 这里把我们对数据的处理方式做了俩维度的分类, 如下表格：
| Type | SINGLE | MULTIPLE |
|---|---|---|
| Pull | Function | Iterator |
| Push | Promise | Observable |
那啥是拉和推呢。 现在简单的理解， 我调用获得的， 就是我 pull 来的， 等回调回来的， 就是别人 push 给我的。 可以先看看代码感受一下子。
示例代码示例如下:
- 拉取单个数据
function getNum() {
return Math.floor(Math.random() * 10)
}
function singlePull() {
const num = getNum()
console.log(num, 'singlePull')
}
- 推送单个数据
function getNumPromise() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(getNum())
}, 1000)
})
}
// SINGLE Push
function singlePush() {
const promise = getNumPromise()
promise.then(num => console.log(num, 'singlePush'))
}
- 拉取多个数据
// 迭代器
function* getNumIterator() {
let i = 0;
while (i < 3) {
i++;
yield getNum();
}
return i;
}
// MULTIPLE pull
function multiplePull() {
const it = getNumIterator()
while (true) {
const { value, done } = it.next()
if (done) break
console.log(value, 'multiplePull')
}
}
- 推送多个数据
function getNumObservable() {
return new Observable(subscriber => {
subscriber.next(getNum())
subscriber.next(getNum())
subscriber.next(getNum())
setTimeout(() => {
subscriber.next(getNum())
subscriber.complete()
}, 200)
})
}
function multiplePush() {
const ob = getNumObservable()
ob.subscribe(val => {
console.log(val, 'multiplePush')
})
}
Pull 和 Push
Pull 和 Push 就是两种获取数据的方式。
Pull 就是我要的时候， 就能要到。 生产者无感。
每个js函数都是可以是在 Pull， ES2015的时候， 出了个生成器(就是function*)，就弥补了 "拉取多个值" 这块的缺点。
Push 就是我决定啥时候给， 啥时候给你啥时候收， 消费者无感。
典型例子就是 Promise ，你就等 then 吧， 好了的时候自然会 push 给你
下面这个表， 从生产者和消费者的角度， 解释了一下 pull 和 push
| 生产者 | 消费者 | |
|---|---|---|
| Pull | 被动: 等着要数据的时候再产生数据 | 主动: 会决定啥时候去要数据 |
| Push | 主动: 按照自己的节奏产生数据， 然后推出去 | 被动: 就等着数据(等回调) |
Observable如何使用
创造 Observable
new 一下， 或者用 操作符 创建;
new一下
const ob = new Observable(subscriber => {
subscriber.next(1)
subscriber.next(2)
subscriber.complete()
})
- 操作符
of(1, 2, 3)
from([1, 2, 3])
interval(200)
订阅 Observable
of(1,2,3).subscribe(val => {
console.log(val, 'of')
})
取消订阅 Observable
const subscription = interval(200).subscribe(val => {
console.log(val, 'interval');
})
setTimeout(() => subscription.unsubscribe(), 1000)
Observable的执行时机
这是一个让人很容易忽略的地方， Observable 是在被 subscribe 了才执行的。
这很重要， 是理解“多播”与“单播”的关键点。
let n = 0;
function getNum() {
return n++;
}
const ob = new Observable(subscriber => {
subscriber.next(getNum());
})
console.log(n) // 0
ob.subscribe(val => console.log(val, 'unicast')); // 1
参考地址： rxjs.dev/guide/obser…
