zoukankan      html  css  js  c++  java
  • 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、事件监听/发布订阅

    3Promise
    4Rxjs


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

  • 相关阅读:
    机器学习是什么
    Computer Vision的尴尬---by林达华
    机器学习算法与Python实践之(四)支持向量机(SVM)实现
    机器学习算法与Python实践之(三)支持向量机(SVM)进阶
    Hortonworks HDP Sandbox定制(配置)开机启动服务(组件)
    GCC单独编译host/examples/ tx_waveforms.cpp
    GDAL1.11版本号对SHP文件索引加速測试
    Tcl 简单介绍及特性
    Hardwood Species
    java整合easyui进行的增删改操作
  • 原文地址:https://www.cnblogs.com/loaderman/p/10906222.html
Copyright © 2011-2022 走看看