>Rxjs异步数据流编程 对比promise 优势
1. 支持订阅
2. 反向订阅
3. 管道过滤器
4. map处理器
>定义Rxjs.compoent.ts
~~~
import { Injectable } from '@angular/core';
import {Observable, observable} from "rxjs";
@Injectable({
providedIn: 'root'
})
export class RxjsService {
constructor() { }
public getRxjsData(){
return new Observable((observer)=>{
setTimeout(()=>{
var ret={code:500,msg:" rxjs ret server run error"};
observer.next(ret);
// observer.error("error")
},2000);
})
}
}
~~~
>在demo.component.ts 中调用执行
~~~
constructor(public PromiseService: PromiseService, public RxjsService: RxjsService) {
}
ngOnInit(): void {
}
public runRxjs(): void {
let a = this.RxjsService.getRxjsData();
/// 管道过滤器
let handle = a.pipe(
filter((value) => {
if (value == "") {
return false;
}
//不返回
return true
}), map((value) => {
return JSON.stringify(value )+ "追加";
})
).subscribe((data) => {
//如果多次执行，会导致这里 多次 回调
console.log(data);
});
setTimeout(() => {
//取消订阅
// handle.unsubscribe();
}, 1000);
}
~~~
- 引言
- 安装angular9
- 入门
- 数据绑定
- 属性绑定
- 实体字符和转义
- html 模板运算
- css样式规范
- 数组与循环ngFor
- 条件ngIf
- 管道
- 事件执行
- 双向数据绑定mvvm
- todolist页面交互
- 公共服务层
- 数据持久化
- dom与ViewChild装饰器
- 父子组件传值
- 子父组件传值ViewChild
- 子父组件out装饰器
- 生命周期-挂/卸载
- es6语法io异步promise
- Rxjs异步数据流编程
- http_request
- axios异步数据
- 英雄route路由
- 动态route路由
- navigate route
- Parent child routing
- modularization
- lazyload