request.service.ts

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';@Injectable({providedIn: 'root'
})
export class RequestService {constructor() { }//1.同步getData(){return 'this is service data';}getCallbackData(cb:any){setTimeout(() => {var name = '张三';// return name;cb(name);},1000);}getRxjsData(){return new Observable((observable) => {setTimeout(() => {var name = '张三---rxjs';//传入数据observable.next(name);// observable.error('错误数据');},3000);})}//多次执行getRxjsIntervalData(){let count = 0;return new Observable((observable) => {setInterval(() => {count++;var name = '张三---Interval'+count;//传入数据observable.next(name);// observable.error('错误数据');},3000);})}getRxjsIntervalNum(){let count = 0;return new Observable((observable) => {setInterval(() => {count++;observable.next(count);// observable.error('错误数据');},2000);})}}

home.component.ts

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(): void {//同步方法let data = this.request.getData();console.log(data);//callback获取异步数据this.request.getCallbackData((data:any)=>{console.log(data);});//rxjs获取异步方法里面的数据var rxjsData = this.request.getRxjsData();rxjsData.subscribe((data) => {console.log(data);})//过一秒以后撤回刚才的操作var stream = this.request.getRxjsData();var d = stream.subscribe((data) => {console.log(data);})setTimeout(() => {d.unsubscribe();//取消订阅})//rxjs执行多次var streamInterval = this.request.getRxjsIntervalData();//定时器streamInterval.subscribe((data) => {console.log(data);})//用工具方法对返回数据进行处理var streamNum = this.request.getRxjsIntervalNum();streamNum.pipe(filter((value:any) => {if(value%2==0){return value;}}),map((value) => {return value * value;})).subscribe((data) => {console.log(data);})}}