Rxjs6.x异步数据流编程-Angular Rxjs快速入门教程

app.module.ts

import{RequestService} from "./services/request.service";
providers: [RequestService],

request.service.ts

import { Injectable } from '@angular/core';
import{Observable} from "rxjs";
import { from } from 'rxjs';
@Injectable({
  providedIn: 'root'
})
export class RequestService {

  constructor() { }
  //同步
  getData() {
    return "this is service data";
  }
  getCallbackData(cb){
    setTimeout(()=>{
      var username="张三";
      cb(username);
    },1000);
  }

  getPromiseData(){
    return new Promise((resolve,reject)=>{
      setTimeout(()=>{
        var username="李四";
        resolve(username);
      },1000);
    });
  }

  getRxjsData(){
    return new Observable((observer)=>{
      setTimeout(()=>{
        var username="张三----Rxjs";
        observer.next(username);
      },2000);
    });
  }
  //多次执行： 
  getPromiseIntervalData(){
    return new Promise((resolve,reject)=>{
      setInterval(()=>{
        var username="李四";
        resolve(username);
      },1000);
    });
  }

  getRxjsIntervalData(){
    let count=0;
    return new Observable((observer)=>{
      count++;
      setInterval(()=>{
        var username="张三----Rxjs--"+count;
        observer.next(username);
      },2000);
    });
  }

  getRxjsIntervalNum(){
    let count=0;
    return new Observable((observer)=>{
      setInterval(()=>{
        count++;
        observer.next(count);
      },1000);
    });
  }
}

request-home.component.ts

import { Component, OnInit } from '@angular/core';
import { RequestService } from "../../services/request.service";
import { map, filter } from "rxjs/operators";
@Component({
  selector: 'app-request-home',
  templateUrl: './request-home.component.html',
  styleUrls: ['./request-home.component.scss']
})
export class RequestHomeComponent implements OnInit {

  constructor(public request: RequestService) { }

  ngOnInit() {
    //同步方法：
    // let data = this.request.getData();
    // console.log(data);

    // //回调函数解决异步的问题：
    // this.request.getCallbackData((data) => {
    //   console.log(data);
    // });

    // //通过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);
    // });

    //map
    // var streemNum = this.request.getRxjsIntervalNum();
    // streemNum.pipe(
    //   map((value) => {
    //     return value * value;
    //   })
    // ).subscribe((data) => {
    //   console.log(data);
    // });


    //map和filter一起使用：
    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);
    });
  }

}