当前位置 博文首页 > 文章内容
最大化 缩小

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

    作者： 栏目：未分类 时间：2020-08-25 18:01:55

    本站于2023年9月4日。收到“大连君*****咨询有限公司”通知
    说我们IIS7站长博客，有一篇博文用了他们的图片。
    要求我们给他们一张图片6000元。要不然法院告我们

    为避免不必要的麻烦，IIS7站长博客，全站内容图片下架、并积极应诉
    博文内容全部不再显示，请需要相关资讯的站长朋友到必应搜索。谢谢！

    另祝：版权碰瓷诈骗团伙，早日弃暗投明。

    相关新闻：借版权之名、行诈骗之实，周某因犯诈骗罪被判处有期徒刑十一年六个月

    叹！百花齐放的时代,渐行渐远!


    同步与异步获取服务数据

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