angular RJX

RJX

RxJS 是 ReactiveX 编程理念的 JavaScript 版本。ReactiveX 来自微软，它是一种针对异步数据 流的编程。简单来说，它将一切数据，包括 HTTP 请求，DOM 事件或者普通数据等包装成流 的形式，然后用强大丰富的操作符对流进行处理，使你能以同步编程的方式处理异步数据， 并组合不同的操作符来轻松优雅的实现你所需要的功能。
RxJS 是一种针对异步数据流编程工具，或者叫响应式扩展编程；可不管如何解释 RxJS 其目 标就是异步编程，Angular 引入 RxJS 为了就是让异步可控、更简单。

• 目前常见的异步编程的几种方法：
  1、回调函数
  2、事件监听/发布订阅
  3、Promise
  4、Rxjs

Promise 和 RxJS 处理异步对比

• Promise 处理异步:

let promise = new Promise(resolve => { 
setTimeout(() => { 
resolve('---promise timeout---'); }, 2000); 
}); 
promise.then(value => console.log(value));

• RxJS 处理异步：

import {Observable} from 'rxjs';
let stream = new Observable(observer => {
setTimeout(() => { 
observer.next('observable timeout'); 
}, 2000); 
}); 
stream.subscribe(value => console.log(value));

Rxjs unsubscribe 取消订阅

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

• Rxjs 可以通过 unsubscribe() 可以撤回 subscribe 的动作

let stream = new Observable(observer => { 
let timeout = setTimeout(() => { 
clearTimeout(timeout); 
observer.next('observable timeout'); }, 
2000); 
}); 
let disposable = stream.subscribe(value =>
 console.log(value)); 
setTimeout(() => { 
//取消执行 disposable.unsubscribe(); 
}, 1000);

Rxjs 订阅后多次执行

这一点 Promise 是做不到的，对于 Promise 来说，最终结果要么 resole（兑现）、要么 reject （拒绝），而且都只能触发一次。如果在同一个 Promise 对象上多次调用 resolve 方法， 则会抛异常。而 Observable 不一样，它可以不断地触发下一个值，就像 next() 这个方法的 名字所暗示的那样。

let stream = new Observable(observer => { 
let count = 0; 
setInterval(() => { 
observer.next(count++); }, 
1000); 
}); 
stream.subscribe(value => console.log("Observable>"+value));

Rxjs 延迟执行

import {Observable,fromEvent} from 'rxjs'; 
import {map,filter,throttleTime} from 'rxjs/operators'; 
var button = document.querySelector('button'); 
fromEvent(button, 'click').pipe( throttleTime(1000) ).subscribe(() => console.log(`Clicked`));

export class HomeComponent implements OnInit {
  constructor(public request:RequestService) { }
  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);
     })
  }
}