rxjs异步编程

最新推荐文章于 2024-01-05 17:42:26 发布

qq_27449993

最新推荐文章于 2024-01-05 17:42:26 发布

阅读量531

点赞数

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/qq_27449993/article/details/90718787

前端专栏收录该内容

114 篇文章

订阅专栏

本文详细探讨了RxJS如何通过可观测序列实现异步编程，涵盖了创建Observable、订阅、操作符使用以及错误处理等核心概念，帮助开发者掌握这一强大的JavaScript异步库。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

  }



  //多次执行rxjs

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

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









  }

}