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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了angular之Rxjs异步数据流编程入门，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3679字，纯文字阅读大概需要6分钟。

内容图文

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

 

 

 

内容总结

以上是互联网集市为您收集整理的angular之Rxjs异步数据流编程入门全部内容，希望文章能够帮你解决angular之Rxjs异步数据流编程入门所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---