angular之Rxjs异步数据流编程入门

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);
     })
     
  }
  
}