Angular异步数据流编程

news2024/11/28 13:48:17

1 目前常见的异步编程的几种方法

首先给出一个异步请求的实例：

import {Injectable} from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class RequestServiceService {

  constructor() {
  }

  getData() {
    setTimeout(() => {
      let res = 'zhaoshuai-lc'
      return res
    }, 3000)
  }
}


import {Component, OnInit} from '@angular/core';
import {RequestServiceService} from "./services/request-service.service";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit{

  constructor(public RequestServiceService: RequestServiceService) {
  }

  ngOnInit(): void {
    let data = this.RequestServiceService.getData()
    console.log(data)
  }
}

在这里插入图片描述

1.1 回调函数解决问题

import {Component, OnInit} from '@angular/core';
import {RequestServiceService} from "./services/request-service.service";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit{

  constructor(public RequestServiceService: RequestServiceService) {
  }

  ngOnInit(): void {
    this.RequestServiceService.getData(data => {
      console.log(data)
    })
  }
}


import {Injectable} from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class RequestServiceService {

  constructor() {
  }

  getData(callBack) {
    setTimeout(() => {
      let res = 'zhaoshuai-lc'
      callBack(res)
    }, 3000)
  }
}

在这里插入图片描述

1.2 Promise 处理异步

import {Injectable} from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class RequestServiceService {

  constructor() {
  }

  getData() {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        let res = 'zhaoshuai-lc'
        resolve(res)
      }, 3000)
    })

  }
}


import {Component, OnInit} from '@angular/core';
import {RequestServiceService} from "./services/request-service.service";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {

  constructor(public RequestServiceService: RequestServiceService) {
  }

  ngOnInit(): void {
    let promiseData = this.RequestServiceService.getData()
    promiseData.then(data => {
      console.log(data)
    })
  }
}

1.3 RxJS 处理异步

import {Injectable} from '@angular/core';
import {Observable} from "rxjs";

@Injectable({
  providedIn: 'root'
})
export class RequestServiceService {

  constructor() {
  }

  getData() {
    return new Observable(observer => {
      setTimeout(() => {
        let res = 'zhaoshuai-lc'
        observer.next(res)
      }, 3000)
    })
  }
}


import {Component, OnInit} from '@angular/core';
import {RequestServiceService} from "./services/request-service.service";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {

  constructor(public RequestServiceService: RequestServiceService) {
  }

  ngOnInit(): void {
    let observableData = this.RequestServiceService.getData()
    observableData.subscribe(data => {
      console.log(data)
    })
  }
}

从上面列子可以看到 RxJS 和 Promise 的基本用法非常类似，除了一些关键词不同。 Promise 里面用的是 then() 和 resolve()，而 RxJS 里面用的是 next() 和 subscribe()。

从上面例子我们感觉 Promise 和 RxJS 的用法基本相似。其实 Rxjs 相比 Promise 要强大很多。 比如 Rxjs 中可以中途撤回、Rxjs 可以发射多个值、Rxjs 提供了多种工具函数等等。

2 Rxjs unsubscribe 取消订阅

Promise 的创建之后，动作是无法撤回的。Observable 不一样，动作可以通过 unsbscribe() 方法中途撤回，而且 Observable 在内部做了智能的处理。

import {Component, OnInit} from '@angular/core';
import {RequestServiceService} from "./services/request-service.service";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {

  constructor(public RequestServiceService: RequestServiceService) {
  }

  ngOnInit(): void {
    // 过一秒撤回
    let stream = this.RequestServiceService.getData()
    let res = stream.subscribe(data => {
      console.log(data)
    })
    setTimeout(() => {
      console.log('取消订阅了')
      res.unsubscribe()
    }, 1000)
  }
}

3 Rxjs 订阅后多次执行

如果我们想让异步里面的方法多次执行，这一点 Promise 是做不到的。对于 Promise 来说，最终结果要么 resolve（兑现）、要么 reject （拒绝），而且都只能触发一次。如果在同一个 Promise 对象上多次调用 resolve 方法， 则会抛异常。而 Observable 不一样，它可以不断地触发下一个值，就像 next() 这个方法的 名字所暗示的那样。

import {Injectable} from '@angular/core';
import {Observable} from "rxjs";

@Injectable({
  providedIn: 'root'
})
export class RequestServiceService {

  constructor() {
  }

  getData() {
    return new Observable(observer => {
      setInterval(() => {
        let res = 'zhaoshuai-lc'
        observer.next(res)
      }, 1000)
    })
  }
}


import {Component, OnInit} from '@angular/core';
import {RequestServiceService} from "./services/request-service.service";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {

  constructor(public RequestServiceService: RequestServiceService) {
  }

  ngOnInit(): void {
    let stream = this.RequestServiceService.getData()
    let res = stream.subscribe(data => {
      console.log(data)
    })
  }
}

4 Angualr6.x 之后使用 Rxjs 的工具函数 map,filter

import {Injectable} from '@angular/core';
import {Observable} from "rxjs";

@Injectable({
  providedIn: 'root'
})
export class RequestServiceService {

  constructor() {
  }

  getData() {
    return new Observable(observer => {
      let count = 0;
      setInterval(() => {
        count++
        observer.next(count)
      }, 1000)
    })
  }
}


import {Component, OnInit} from '@angular/core';
import {RequestServiceService} from "./services/request-service.service";
import {filter, map} from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {

  constructor(public RequestServiceService: RequestServiceService) {
  }

  ngOnInit(): void {
    let stream = this.RequestServiceService.getData()
    stream.pipe(
      filter(value => Number(value) % 2 == 0),
      map(value => Number(value) * Number(value))
    ).subscribe(data => {
      console.log(data)
    })
  }
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1166473.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

uniapp写一个计算器用于记账（微信小程序，APP）

uniapp写一个计算器用于记账（微信小程序，APP）

提要：自己用uniapp写了一个记账小程序（目前是小程序），写到计算器部分，在网上找了别人写的计算器，大多数逻辑都是最简单的，都不能满足一个记账计算器的基本逻辑。与其在网上找来找去，…
阅读更多...
Okta 数据泄露暴露了员工的个人信息

Okta 数据泄露暴露了员工的个人信息

Okta 警告近 5000 名员工，他们的个人信息在第三方供应商遭到破坏后泄露。 Okta 是一家位于旧金山的云身份和访问管理解决方案提供商，其单点登录 (SSO)、多重身份验证 (MFA) 和 API 访问管理服务被全球数千个组织使用。 该 数据泄露通知 警告称&#xf…
阅读更多...
PS学习笔记合集

PS学习笔记合集

2.一些快捷键 一、放大快捷键 Ctrl：在画布中点击一次，即可放大一次，可多次点击。 CtrlShift：在画布中点击一次，即可放大到适合窗口大小。 CtrlAlt：在画布中点击一次，即可放大到适合窗口大小&a…
阅读更多...
Leetcode刷题详解——二叉树的所有路径

Leetcode刷题详解——二叉树的所有路径

1. 题目链接：257. 二叉树的所有路径 2. 题目描述： 给你一个二叉树的根节点 root ，按 任意顺序 ，返回所有从根节点到叶子节点的路径。 叶子节点 是指没有子节点的节点。 示例 1： 输入：root [1,2,3,null,5]…
阅读更多...
电器展示预约小程序的效果

电器展示预约小程序的效果

大小电器是人们生活中必备的，电商经济条件下，很多消费者往往会通过线上购买电器，使得线下商家经营困难，但实体店依然有存在的意义，比如一些大件或精细电器，也需要亲自挑选、本地配送等。 对实体店商家来说…
阅读更多...
云上智能驾驶三维重建优秀实践

云上智能驾驶三维重建优秀实践

本文重点介绍火山引擎多媒体实验室三维重建技术在动态、静态场景的以及结合先进光场重建技术的原理与实践，帮助大家能更好的了解和认识云上智能三维重建如何服务智能驾驶领域，助力行业发展。 智能驾驶技术的不断发展，正在改变着我们的出行方式…
阅读更多...
【深入探究人工智能】历史、应用、技术与未来

【深入探究人工智能】历史、应用、技术与未来

深入探究人工智能 前言人工智能的历史人工智能的应用人工智能的技术人工智能的未来当代的人工智能产物结语🍀小结🍀 🎉博客主页：小智_x0___0x_ 🎉欢迎关注：👍点赞🙌收藏✍️留言 &am…
阅读更多...
第二十一章 模板

第二十一章 模板

一、模板 1、模板的概念 模板就是建立通用的模具，大大提高复用性 例如生活中的模板 一寸照片模板： PPT模板： 模板的特点： 模板不可以直接使用，它只是一个框架 模板的通用并不是万能的 2、函数模板 C另一种编程思…
阅读更多...
定时器和Timer

定时器和Timer

♫什么是定时器 定时器是一种计时设备，通过定时器可以让某段代码达到设定的时间后再执行。定时器是一个常用的组件，如在进行网络编程时就常用定时器来定时重发数据包、定时检测网络连接状态、定时更新缓存等操作。 ♫实现一个定时器 定时器需要有一个优先…
阅读更多...
chat2db初步使用和体验AI

chat2db初步使用和体验AI

今天下载chat2db体验了下将主要功能和使用截图总结下： 功能： 1.传统客户端能使用的功能基本都有，并且增加了导出excel等便捷的能力。 2.报表功能： 可以根据查询结果进行对应报表可视化显示 3.AI解析sql 可以根据输入的汉语例如…
阅读更多...
比如我的企业也想要申报抖音白名单进行直播招聘，该如何操作呢？

比如我的企业也想要申报抖音白名单进行直播招聘，该如何操作呢？

比如现在我的企业也想要申报抖音白名单进行直播招聘，该如何申报呢？ 答：相关企业/商家在提供自身相关的招聘资质后，就可以进行抖音直播报白名单的申请，在审核通过之后就可以百分百的在抖音直播时畅聊关于自家企业的招聘…
阅读更多...
全志XR806基于FreeRTOS的SoftAp配网实现

全志XR806基于FreeRTOS的SoftAp配网实现

1.环境搭建 由于电脑上之前就有开发其他设备用的ubuntu18.06虚拟机环境，就在此环境基础上进行开发。基本环境搭建参考官方文档进行： 全志XR806开发板开发环境搭建 2.功能实现 2.1设计思路 从官方下载的SDK开发包project/example目录下有基本功能实现…
阅读更多...
Java后端开发——JDBC组件

Java后端开发——JDBC组件

JDBC（Java Database Connectivity）是Java SE平台的一种标准API，它提供了一种标准的方法来访问关系型数据库，使得Java程序能够与各种不同的数据库进行交互，这篇文章我们来进行实验体验一下。 自定义JDBC连接工具类 1.编…
阅读更多...
【快刊推荐】EI快刊盘点，仅29天录用，国人友好，接收领域广！

【快刊推荐】EI快刊盘点，仅29天录用，国人友好，接收领域广！

综合类EI • 快刊推荐 01 期刊简介 检索数据库：EI &Scopus &Google Scholar 版面类别：正刊 数据库收录年份：2009年 国人占比：47%，对国人友好 年发文量：20篇左右 02 接收领域 生物&#xff0…
阅读更多...
使用C++的QT框架实现俄罗斯方块

使用C++的QT框架实现俄罗斯方块

今天实现一个简单的俄罗斯方块，网上别人写的都比较长还复杂，我就写了一个简单的，可以实现功能的俄罗斯方块，使用的是C语言，框架都可以，主要是逻辑思路有都可以实现 我这边实现的逻辑为两个数组包含各个动态…
阅读更多...
“没有酒瓶”的新春礼酒，泸州老窖的颠覆性之作

“没有酒瓶”的新春礼酒，泸州老窖的颠覆性之作

执笔 | 萧 萧 编辑 | 扬 灵 没有想到，新春礼酒还能跳出生肖酒造型桎梏，开创出“没有酒瓶的白酒”。 没有想到，即将要发布的新品就“藏”在每一位参会者都触手可及的餐桌正中。 没有想到，首发定价如此“实诚”，加…
阅读更多...
python爬取Web of science论文信息

python爬取Web of science论文信息

一、python爬取WOS总体思路 (一)拟实现功能描述 wos里面，爬取论文的名称，作者名称，作者单位，引用数量 要求：英文论文、期刊无论好坏 检索关键词：zhejiang academy of agricultural sciences、 xianghu lab…
阅读更多...
【并查集】93 岛屿数量

【并查集】93 岛屿数量

岛屿数量 题解1 DFS（图论经典方法）题解2 BFS(遍历（DFS展开【顺序不同】）)题解3 并查集（学习理解） 给你一个由 ‘1’（陆地）和 ‘0’（水）组成的的二维网格&…
阅读更多...
TikTok未来展望：数字创新的下一浪潮

TikTok未来展望：数字创新的下一浪潮

随着全球数字时代的蓬勃发展，TikTok已经成为一个巨大的现象，吸引了数以亿计的用户，尤其是年轻一代。这个短视频分享平台已经深刻影响了社交媒体、娱乐和文化。然而，TikTok未来的发展前景如何？本文将探讨TikTok的未来展…
阅读更多...
哈希的开放定址法的实现【C++】

哈希的开放定址法的实现【C++】

哈希的开放定址法的实现【C】 1 概述2 线性探测2.1 插入2.2 查找2.3 删除2.6 完整代码2.5 线性探测的优缺点 3. 二次探测 1 概述 开放定址法也叫闭散列，是解决哈希冲突的一种方法，当发生哈希冲突之后，如果哈希表没有被装满(正常情况哈希表不会…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023