rxjs介绍与使用 常用的工具类方法

rxjs是reativeX编程理念的javascript版本，是一种针对异步数据流的编程，简单来说它将一切数据包括HTTP请求，DOM事件或者普通数据等包装成流的形式，然后用强大丰富的操作符对流进行处理，使你能以同步编程的方式处理异步数据，并组合不同的操作符来轻松优雅的实现你所需要的功能。

RxJS是一种针对异步数据流编程工具，或者焦灼响应式扩展变化出了个，可不管如何解释RxJS其目标就是异步编程，Angular引入RxJS为了就是让异步可控、更简单。

RxJS里面提供了很多模块。下面主要给大家讲RxJS里面最常用的Observable和fromEvent。

常见的异步编程的几种方法：

· 回调函数

· 事件监听/发布订阅

· Promise

· RxJS

服务里面获取异步数据的代码

import { Injectable } from '@angular/core';

// 引入rxjs

import {Observable} from 'rxjs'

@Injectable({
  providedIn: 'root'
})
export class StorageService {
  public cll:string = 'wuhan'
  constructor() { }
  get(){
    return 'this a storage'
  }
  // 回调函数获取参数
  // getCallBack(cb:any){
  //   setTimeout(()=>{
  //     let name = "张三"
  //     cb(name)
  //   },1000)
  // }

  // promise获取数据
  // getCallBack(){
  //     return new Promise((resole,reject)=>{
  //       setTimeout(()=>{
  //         let name = "张三"
  //         resole(name)
  //       },1000)
  //     })
  //   }

  // RxJS获取异步数据
  getCallBack(){
    return new Observable<any>((observer)=>{
      setTimeout(()=>{
        let name="李四"
        observer.next(name) // 成功返回
        // observer.error(name) // 失败返回
      })
    })
  }

}

组件中获取服务里面数据的代码

import { Component, OnInit } from '@angular/core';
import {StorageService} from '../../services/storage.service'

@Component({
  selector: 'app-rxjs',
  templateUrl: './rxjs.component.html',
  styleUrls: ['./rxjs.component.scss']
})
export class RxjsComponent implements OnInit {

  constructor(public requestData:StorageService) { }

  ngOnInit(): void {
    // 回调函数获取数据
    // this.requestData.getCallBack((data:any)=>{
    //   console.log(data)
    // })

    // promise获取异步数据
    // let promiseData = this.requestData.getCallBack()
    // promiseData.then((res:any)=>{
    //   console.log(res)
    // })

    // RxJS获取异步数据
    let rxjsData = this.requestData.getCallBack()
    
    rxjsData.subscribe((res:any)=>{
      console.log(res)
    })
  }

}

上述例子可以看到RxJS和Promise的基本用法非常类似，除了一些关键词不同，Promise里面使用的then()和resolve()，而RxJS里面用的是next()和subscribe()。

相比于promise，RxJS要更加强大一点，比如可以中途撤回、RxJS可以发射多个值，RxJS提供了多种工具函数等等。

Rxjs里面的unsubscribe取消订阅功能

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

// 过1s撤回刚才的操作
    let streem = this.requestData.getCallBack()

    let d = streem.subscribe((res)=>{
      console.log(res)
    })

    // 取消订阅
    setTimeout(()=>{
      d.unsubscribe() 
    },1000)

Rxjs里面订阅后多次执行

这一点promise是做不到的，对于promise来说，最终的结果要么resole，要么reject，而且智能触发一次，如果在同一个promise对象上多次调用resole方法，则会抛出异常，而Observable不一样，他可以不断地触发下一个值，就像next()这个方法的名字所暗示的一样。

import { Injectable } from '@angular/core';

// 引入rxjs

import {Observable} from 'rxjs'

@Injectable({
  providedIn: 'root'
})
export class StorageService {
  public cll:string = 'wuhan'
  constructor() { }
  // 多次执行
  getCallBack(){
    let count = 0
      return new Observable<any>((observer)=>{
        setInterval(()=>{
          count++ 
          let name="李四"+count
          observer.next(name) // 成功返回
          // observer.error(name) // 失败返回
        },1000)
      })
    }

}

组件中的代码

import { Component, OnInit } from '@angular/core';
import {StorageService} from '../../services/storage.service'

@Component({
  selector: 'app-rxjs',
  templateUrl: './rxjs.component.html',
  styleUrls: ['./rxjs.component.scss']
})
export class RxjsComponent implements OnInit {

  constructor(public requestData:StorageService) { }

  ngOnInit(): void {
    // 订阅后多次执行
    // RxJS获取异步数据
    let rxjsData = this.requestData.getCallBack()
    
    rxjsData.subscribe((res)=>{
      console.log(res)
    })

  }

}

Rxjs里面提供的工具函数map filter

angular6以后使用以前的RxJS方法，必须安装rxjs-compat模块才能使用map、filter方法，angular6以后官方使用的是RxJS6的新特性，所以官方给出了一个可以暂时延缓我们不需要修改RxJS代码的方法。

import { Component, OnInit } from '@angular/core';
import {StorageService} from '../../services/storage.service'
import {map,filter } from 'rxjs/operator'; // 引用工具类方法

@Component({
  selector: 'app-rxjs',
  templateUrl: './rxjs.component.html',
  styleUrls: ['./rxjs.component.scss']
})
export class RxjsComponent implements OnInit {

  constructor(public requestData:StorageService) { }

  ngOnInit(): void {
    // 使用工具类处理数据
     let rxjsData = this.requestData.getCallBack()
     
      rxjsData.pipe(
        filter((value:any)=>{
          if(value%2 == 0){
            return true
          }
        })
      ).subscribe((res)=>{
        console.log(res)
      })

      rxjsData.pipe(
        map((value:any)=>{
         return value * value
        })
      ).subscribe((res)=>{
        console.log(res)
      })

  }

}

上面给大家讲解了rxjs的基本用法以及常用的工具类方法，如果你觉得哪里讲的不对，可以私信，我们一起努力解决。