Rxjs介绍
参考手册:https://www.npmjs.com/package/rxjs
中文手册:https://cn.rx.js.org/
RxJS 是 ReactiveX 编程理念的 JavaScript 版本。ReactiveX 来自微软，它是一种针对异步数据 流的编程。简单来说，它将一切数据，包括 HTTP 请求，DOM 事件或者普通数据等包装成流 的形式，然后用强大丰富的操作符对流进行处理，使你能以同步编程的方式处理异步数据， 并组合不同的操作符来轻松优雅的实现你所需要的功能。
RxJS 是一种针对异步数据流编程工具，或者叫响应式扩展编程;可不管如何解释 RxJS 其目 标就是异步编程，Angular 引入 RxJS 为了就是让异步可控、更简单。
RxJS 里面提供了很多模块。这里我们主要给大家讲 RxJS 里面最常用的 Observable 和 fromEvent。
目前常见的异步编程的几种方法:
1、回调函数
2、事件监听/发布订阅
3、Promise
4、Rxjs
import { Injectable } from '@angular/core';
import {Observable} from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class RequestService {
constructor() { }
//同步
getData(){
return 'this is service data';
}
getCallbackData(cb){
setTimeout(() => {
var username='张三';
// return username;
cb(username);
}, 1000);
}
getPromiseData(){
return new Promise((resolve)=>{
setTimeout(() => {
var username='张三--Promise';
resolve(username);
}, 3000);
})
}
getRxjsData(){
return new Observable<any>((observer)=>{
setTimeout(() => {
var username='张三--Rxjs';
observer.next(username);
// observer.error('数据')
}, 3000);
})
}
//多次执行
getPromiseIntervalData(){
return new Promise((resolve)=>{
setInterval(() => {
var username='张三--Promise Interval';
resolve(username);
}, 1000);
})
}
getRxjsIntervalData(){
let count=0;
return new Observable<any>((observer)=>{
setInterval(() => {
count++;
var username='张三--Rxjs-Interval'+count;
observer.next(username);
// observer.error('数据')
}, 1000);
})
}
getRxjsIntervalNum(){
let count=0;
return new Observable<any>((observer)=>{
setInterval(() => {
count++;
observer.next(count);
// observer.error('数据')
}, 1000);
})
}
}import { Component, OnInit } from '@angular/core';
import { RequestService } from '../../services/request.service';
import {map,filter} from 'rxjs/operators';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
constructor( public request:RequestService) {
}
runParent(msg:string){
//接收子组件传递过来的数据 runParent(msg:string){
alert(msg);
}
public title='新闻标题'
ngOnInit() {
//1、同步方法
let data=this.request.getData();
console.log(data);
//2、callback获取异步数据
this.request.getCallbackData((data)=>{
console.log(data);
});
//3、promise获取异步数据
var promiseData=this.request.getPromiseData();
promiseData.then((data)=>{
console.log(data);
})
//4、rxjs获取异步方法里面的数据
var rxjsData=this.request.getRxjsData();
rxjsData.subscribe((data)=>{
console.log(data);
})
//5、过一秒以后撤回刚才的操作
var streem=this.request.getRxjsData();
var d=streem.subscribe((data)=>{
console.log(data);
})
setTimeout(()=>{
d.unsubscribe(); /*取消订阅*/
},1000)
//6、promise 执行多次（没有这个能力）
var intervalData=this.request.getPromiseIntervalData();
intervalData.then((data)=>{
console.log(data);
})
//7、rxjs执行多次
var streemInterval=this.request.getRxjsIntervalData();
streemInterval.subscribe((data)=>{
console.log(data);
})
//8、用工具方法对返回的数据进行处理
var streemNum=this.request.getRxjsIntervalNum();
streemNum.pipe(
filter((value)=>{
if(value%2==0){
return true;
}
})
)
.subscribe((data)=>{
console.log(data);
})
var streemNum=this.request.getRxjsIntervalNum();
streemNum.pipe(
map((value)=>{
return value*value;
})
)
.subscribe((data)=>{
console.log(data);
})
var streemNum=this.request.getRxjsIntervalNum();
streemNum.pipe(
filter((value)=>{
if(value%2==0){
return true;
}
}),
map((value)=>{
return value*value;
})
)
.subscribe((data)=>{
console.log(data);
})
}
}