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

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

异步：

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

 

查看更多关于Angular同步与异步获取服务数据(附完整代码）的详细内容...