文章目录

Rxjs异步数据流编程各异步编程语法比较相比Promise的优势Rxjs unsubscribe 取消订阅Rxjs 订阅后多次执行Rxjs 工具函数 rxjs教程指路 中文手册

Rxjs异步数据流编程

个人理解：异步编程，类Promise，功能比Promise更强大

各异步编程语法比较

回调函数 function getcallbackData(callback) { setTimeout(() => { const data = 'data-callback'; callback(data); }, 1000); } getcallbackData((data) => { console.log(data) }) Promise function getPromiseData() { return new Promise((resolve) => { setTimeout(() => { const data = 'data-Promise' resolve(data) }, 2000) }) } getPromiseData().then((data) => { console.log(data); }) rxjs function getRxjsData() { return new Observable((observer) => { setTimeout(() => { const data = 'data-Rxjs' observer.next(data) }, 3000) }) } getRxjsData().subscribe((data) => { console.log(data) })

从上面可以看出，rxjs与promise的语法非常相似，rsxj使用的对象是Observable，获取数据使用的关键字是subscribe（订阅）

相比Promise的优势

什么叫优势，你能做的我能做，做的好不好暂且不谈，但是我能做的你做不了，这就是优势了

Rxjs unsubscribe 取消订阅

Promise创建之后，动作是无法撤回的。Observable不一样，动作可以通过unsbscribe()方法中途撤回，而且Observable在内部做了智能的处理。举例如下

function getRxjsData() { return new Observable((observer) => { setTimeout(() => { const data = 'data-Rxjs' observer.next(data) }, 3000) }) } const res = getRxjsData().subscribe((data) => { console.log(data) }) setTimeout(() => { res.unsubscribe(); // 取消订阅 }, 1000) // 不会打印输出结果

Rxjs 订阅后多次执行

如果我们想让异步里面的方法多次执行，比如下面这段代码

function getIntervalPromiseData() { return new Promise((resolve) => { setInterval(() => { const data = 'Intervaldata-Promise' resolve(data) }, 2000) }) } getIntervalPromiseData().then((data) => { console.log(data); })

结果promsie中的数据只能打印一次，而Observable不一样，它可以不断地触发下一个值，就像next()这个方法的名字所暗示的那样。

function getIntervalRxjsData() { let count = 0; return new Observable((observer) => { setInterval(() => { count++ const data = 'Intervaldata-Rxjs' + count observer.next(data) }, 1000) }) } getIntervalRxjsData().subscribe((data) => { console.log(data) }) //打印结果 // Intervaldata-Rxjs1 // Intervaldata-Rxjs2 // Intervaldata-Rxjs3 // ······

Rxjs 工具函数

在angular中使用rxjs的相关工具函数需要引入相关的模块

import { map, filter } from 'rxjs/operators' filter function getIntervalRxjsNum() { let count = 0; return new Observable((observer) => { setInterval(() => { count++ observer.next(count) }, 1000) }) } getIntervalRxjsNum().pipe( filter((value: number) => { return value % 2 === 0 }) ).subscribe((data) => { console.log(data) }) // 打印结果 // 2 // 4 // 6 // ···

filter的作用是过滤订阅的数据，上例中，只获取偶数

map getIntervalRxjsNum().pipe( map((value: number) => { return value * value }) ).subscribe((data) => { console.log(data) }) // 打印结果 // 1 // 4 // 9 // ···

与js中数组方法map类似，可以对数据进行修改

复合使用map和filter getIntervalRxjsNum().pipe( filter((value: number) => { return value % 2 === 0 }), map((value: number) => { return value * value }) ).subscribe((data) => { console.log(data) }) // 打印结果 // 4 // 16 // 36 // ···

工具函数都是在pipe管道中使用的，有点类似angular中的模板语法