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

  }

}