异步处理 —— RxJS Observable

Observable 称它为可观察对象,它并不是 Angular 的东西,而是 ES7 的一种用来管理异步数据的标准。

Observable 可观察对象是开辟一个连续的通信通道给观察者 Observer,彼此之前形成一种关系,而这种关系需要由 Subscription 来确立,而在整个通道中允许对数据进行转换我们称为操作符 Operator。

有一个形象的比喻:

你订了一个银行卡余额变化短信通知的服务,那么这个时候,每次只要你转账或者是购买商品在使用这张银行卡消费之后,银行的系统就会给你推送一条短信,通知你消费了多少多少钱;

这个场景下,银行卡余额就是 Observable,用户就是 Observer,用户在银行办理这个服务,就是 Subscription,银行卡余额发生转账或购买商品产生了变动,就是 Operator。

将上面的过程转化为代码:

import { Observable } from 'rxjs/Rx';

let sub = Observable
    .interval(1000)
    .map(second => second + '秒')
    .subscribe(res => {
        console.log(res);
    });

利用 Observable.interval 每隔 1 秒产生一个数据,然后交给 map 操作号将内容进行转换(银行卡余额发生变动),最后交给观察者打印结果(通知用户余额发生变化)。

如果你想取消这个服务,可以调用 sub.unsubscribe();

整个过程都在体现一个思想:数据流!这和函数式编程思路一致,数据流就像是工厂流水线,从原材料到成品,经过一层层的处理,所见即所做,非常清晰!(分离材料与加工机器,就是分离 Observable 和 Subscribe)

接下来,我们再具体看看 Observable 细节:

1、创建

const Rx = require('rxjs/Rx')

const myObservable = Rx.Observable.create(observer => {
  observer.next('foo');
  setTimeout(() => observer.next('bar'), 1000);
});

我们可以调用 Observable.create 方法来创建一个 Observable,入参是 observer,在函数内部通过调用 observer.next() 便可生成有一系列值的一个 Observable。

2、内置方法

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

next、error、complete,都是可选项;

打个比方:用户订牛奶厂商的牛奶,牛奶厂商是 Observable,用户是 Observer。用户打电话(subscribe)给牛奶商,牛奶商送牛奶(next),用户收到牛奶后喝牛奶;送奶过程可能发生意外,送奶失败(error);或者送奶顺利全部完成(complete);

3、Operator:RxJS 提供了大量的 API,熟悉他们需要时间和经验;

3.1 创建数据流

  • 单值:of、empty、never
  • 多值:from
  • 定时:interval、timer
  • 事件:fromEvent
  • Promise:fromPromise
  • 自定义:create

3.2 转换

  • 改变数据形态:map, mapTo, pluck
  • 过滤一些值:filter, skip, first, last, take
  • 时间轴上的操作:delay, timeout, throttle, debounce, audit, bufferTime
  • 累加:reduce, scan
  • 异常处理:throw, catch, retry, finally
  • 条件执行:takeUntil,delayWhen, retryWhen, subscribeOn, ObserveOn
  • 转接:switch

3.3 组合

  • concat 保持原来的序列顺序连接两个数据流
  • merge 合并序列
  • race 预设条件为其中一个数据流完成
  • forkJoin 预设条件为所有数据流都完成
  • zip 取各来源数据流最后一个值合并为对象
  • combineLatest 取各来源数据流最后一个值合并为数组

Observable 的优势在于:

  • 降低了目标与观察者之间的耦合关系,两者之间是抽象耦合关系;
  • 符合 依赖倒置原则;
  • 目标与观察者之间建立了一套触发机制;
  • 支持广播通信多播;

依赖倒置原则:依赖倒置原则(Dependence Inversion Principle)是程序要依赖于抽象接口,不要依赖于具体实现。简单的说就是要求对抽象进行编程,不要对实现进行编程,这样就降低了客户与实现模块间的耦合。

多播(即一个Observable,多个subscribe):
在这里插入图片描述

原文链接

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值