Angular同步与异步获取服务数据(附完整代码）

同步与异步获取服务数据

1. 同步：直接获取服务已有数据

2. 异步：

　　　　1)   使用回调函数实现

　　　　2)  使用Promise实现

　　　　3)  使用Rxjs实现：import { Observable } from 'rxjs';

　　　　4)  同时，Rxjs功能更强大，可取消订阅，可多次订阅

完整代码

组件：home

html：

<p>同步获取服务数据-----{{data}}</p>
<p>异步获取服务数据--回调函数-----{{data1}}</p>
<p>异步获取服务数据--Promise实现-----{{data2}}</p>

<p>异步获取服务数据--RXJS 实现-----{{data3}}</p>

TS：

import { Component, OnInit } from '@angular/core';
import {RequestService} from '../../services/request.service';
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  public data:string;
  public data1:string;
  public data2:any;
  public data3:any;
  
  constructor(public resevice:RequestService) { 
    this.data=this.resevice.getData();//同步获取服务数据
    this.resevice.getCallBackData((d)=>{//异步获取服务数据--回调函数
      this.data1=d;
      // console.log(d);
      
    });
    var promiseData=this.resevice.getPromiseData();
    promiseData.then((data)=>{
       this.data2=data;
    });


    // 异步获取服务数据--RXJS 实现   
    var rxjsData=this.resevice.getRxjsData();
   var d= rxjsData.subscribe((data)=>{
      this.data3=data;
    })

    //取消异步订阅 不会显示张三--rxjs
    setTimeout(() => {
      d.unsubscribe();//取消订阅
    }, 2000);
    //异步多次订阅
  var rxjsData1=this.resevice.getRxjsDataInterval();
  rxjsData1.subscribe((data)=>{
      console.log(data);
    })
  }

  ngOnInit(): void {
  }
 
}

服务：reques

TS

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

  constructor() { }
  getData():string{//同步获取服务数据
    return "this is service data!";
  }
  //异步获取服务数据--回调函数
  getCallBackData(cb){
    setTimeout(() => {
      var username="张三--callback";
      cb(username);
    }, 1000);
  }
  //异步获取服务数据--Promise实现
  getPromiseData(){
    return new Promise((resolve)=>{
      setTimeout(() => {
        var username="张三--promise";
        resolve(username);
      }, 1000);
    });
  }
  //异步获取服务数据--RXJS 实现
  getRxjsData(){
    return new Observable((observe)=>{
      setTimeout(() => {
        var username="张三--rxjs";
        observe.next(username);
      }, 3000);
    });
  }
//异步多次订阅
  getRxjsDataInterval(){
    let count=0;
    return new Observable((observe)=>{
      setInterval(() => {
         count++;
        var username="张三--rxjs";
        observe.next(username+count);
      }, 1000);
     
    });
  }
}