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