Angular异步数据流编程

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.mzph.cn/news/131412.shtml

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

相关文章

设置Ubuntu网络代理

设置Ubuntu网络代理

设置Ubuntu网络代理 1 编写set_proxy.sh 在/home/xxx新建文件set_proxy.sh，添加如下代码： #!/bin/sh hostip$(cat /etc/resolv.conf | grep nameserver | awk { print $2 }) wslip$(hostname -I | awk {print $1}) port10809PROXY_HTTP"http://$…
阅读更多...
SpringBoot基础（四）-- starter的使用

SpringBoot基础（四）-- starter的使用

目录 引言： 1. starter的认识 2. pom.xml文件使用starter的案例（以SpringMVC技术为例） 3. starter的特点 引言：<
阅读更多...
creating server tcp listening socket 127.0.0.1:6379: bind No error

creating server tcp listening socket 127.0.0.1:6379: bind No error

window下启动redis服务报错&#xff1a; creating server tcp listening socket 127.0.0.1:6379: bind No error 解决方案如下按顺序输入如下命令即可连接成功 redis-cli.exeshutdownexit运行&#xff1a;redis-server.exe redis.windows.conf shutdown出现以下错误&#xff…
阅读更多...
如何将PDF文件转换成翻页电子书？这个网站告诉你

如何将PDF文件转换成翻页电子书？这个网站告诉你

​随着电子书的普及&#xff0c;越来越多的人开始将PDF文件转换成翻页电子书。翻页电子书不仅方便阅读&#xff0c;而且还可以在手机上轻松翻页。那么如何将PDF文件转换成翻页电子书呢&#xff1f;今天就为大家介绍一个网站&#xff0c;可以帮助你轻松完成这个任务。 1.首先&am…
阅读更多...
QT窗体之间值的传递，多种方法实现

QT窗体之间值的传递，多种方法实现

目录 1. 信号和槽机制 2. 全局变量或单例模式 3. 事件过滤器 4. Qt属性系统 5. 使用QSettings类 在Qt中&#xff0c;有多种方法可以在窗体之间传递值。下面是一些常用的方法&#xff1a; 1. 信号和槽机制 使用Qt的信号和槽机制是一种常见的方式来在窗体之间传递值。您可以…
阅读更多...
storm安装手册及笔记

storm安装手册及笔记

图解Storm相关概念 图解storm的并发机制 安装Storm的步骤 1、安装一个zookeeper集群 2、上传storm的安装包&#xff0c;解压 3、修改配置文件storm.yaml #所使用的zookeeper集群主机 storm.zookeeper.servers: - "weekend05" - "weekend06"…
阅读更多...
Linux网络编程03

Linux网络编程03

select的缺陷 &#xff08;1&#xff09;fd,set的本质是一个位图&#xff0c;容量是固定的1024&#xff0c;因此最大只能监听1024个连接 &#xff08;可以扩容&#xff09; &#xff08;2&#xff09;监听和就绪用的是同一个数据结构&#xff0c;使用困难 &#xff08;3&#x…
阅读更多...
Zinx框架-游戏服务器开发003：架构搭建-需求分析及TCP通信方式的实现

Zinx框架-游戏服务器开发003：架构搭建-需求分析及TCP通信方式的实现

文章目录 1 项目总体架构2 项目需求2.1 服务器职责2.2 消息的格式和定义 3 基于Tcp连接的通信方式3.1 通道层实现GameChannel类3.1.1 TcpChannel类3.1.2 Tcp工厂类3.1.3 创建主函数&#xff0c;添加Tcp的监听套接字3.1.4 代码测试 3.2 消息类的结构设计和实现3.2.1 消息的定义3…
阅读更多...
java基础练习（使用java实现跨库数据调度ETL）

java基础练习（使用java实现跨库数据调度ETL）

简介 本文写一篇关于java库与库之间的数据传输&#xff0c;现实生产中可能是通过其他方式完成&#xff0c;在没有架构的基础上使用java实现跨库的数据传送&#xff0c;非常不便利。但是作为练习我觉得确实非常有用&#xff0c;涉及的java知识点相对较多。本文以一个实列讲解&am…
阅读更多...
C++相关练习及详细讲解

C++相关练习及详细讲解

目录 题1&#xff1a;输出数组中第k小的数在数组内找出查找数字在该数组第一次出现的索引 题1&#xff1a;输出数组中第k小的数 题目描述&#xff1a; 给定一个数组arr 输出数组中第k小的数 如果不存在 输出-1 输入格式&#xff1a; 第一行输入一个数字n 代表数组arr大小 第二…
阅读更多...
SpringBoot-WebSocket浏览器-服务器双向通信

SpringBoot-WebSocket浏览器-服务器双向通信

文章目录 WebSocket 介绍入门案例 WebSocket 介绍 WebSocket 是基于 TCP 的一种新的网络协议。它实现了浏览器与服务器全双工通信——浏览器和服务器只需要完成一次握手&#xff0c;两者之间就可以创建持久性的连接&#xff0c;并进行双向数据传输。 应用场景&#xff1a; 视…
阅读更多...
UI设计感大型数据管理仪表盘后台模板源码

UI设计感大型数据管理仪表盘后台模板源码

大型数据管理仪表盘后台模板是一款适合数据统计管理后台网站模板下载。提示&#xff1a;本模板调用到谷歌字体库&#xff0c;可能会出现页面打开比较缓慢。 演示下载 qnziyw点cn/wysc/qdmb/20838点html
阅读更多...
Solidity数据类型之函数类型

Solidity数据类型之函数类型

solidity中函数的形式 function <function name>(<parameter types>) {internal|external|public|private} [pure|view|payable] [returns (<return types>)]每个关键字的意思&#xff08;方括号里面的写不写都可以&#xff09; function&#xff1a; 声明函…
阅读更多...
七月论文审稿GPT第2版：从Meta Nougat、GPT4审稿到Mistral、LongLora

七月论文审稿GPT第2版：从Meta Nougat、GPT4审稿到Mistral、LongLora

前言 如此前这篇文章《学术论文GPT的源码解读与微调&#xff1a;从chatpaper、gpt_academic到七月论文审稿GPT》中的第三部分所述&#xff0c;对于论文的摘要/总结、对话、翻译、语法检查而言&#xff0c;市面上的学术论文GPT的效果虽暂未有多好&#xff0c;可至少还过得去&am…
阅读更多...
基于java+springboot+vue的校园出入管理系统

基于java+springboot+vue的校园出入管理系统

项目介绍 本论文主要论述了如何使用JAVA语言开发一个校园出入管理系统 &#xff0c;本系统将严格按照软件开发流程进行各个阶段的工作&#xff0c;采用B/S架构&#xff0c;面向对象编程思想进行项目开发。在引言中&#xff0c;作者将论述校园出入管理系统的当前背景以及系统开…
阅读更多...
PHP自定义函数--输入起始日期和解算日期返回日期差几天和 上一个周期的起始结束日期

PHP自定义函数--输入起始日期和解算日期返回日期差几天和 上一个周期的起始结束日期

/** 日期差几天* param beginDate:2018-01-26 endDatee:2018-01-26* return int days* */ function dateDiff($beginDate, $endDate) {$diff date_diff(date_create($beginDate), date_create($endDate))->format(%R%a);return (int)$diff; }/** 返回上一周期的起始和结束日…
阅读更多...
ArcGIS for Android 禁止地图旋转

ArcGIS for Android 禁止地图旋转

ArcGIS for Android 禁止地图旋转 话不多说&#xff0c;直接上代码&#xff01;&#xff01;&#xff01; public class LoadMap extends AppCompatActivity {// 地图private MapView mapView;private ArcGISMap map;Overrideprotected void onCreate(Bundle savedInstanceSta…
阅读更多...
1.Netty概述

1.Netty概述

原生NIO存在的问题(Netty要解决的问题) 虽然JAVA NIO 和 JAVA AIO框架提供了多路复用IO/异步IO的支持&#xff0c;但是并没有提供给上层“信息格式”的良好封装。JAVA NIO 的 API 使用麻烦,需要熟练掌握 ByteBuffer、Channel、Selector等 , 所以用这些API实现一款真正的网络应…
阅读更多...
【TSGCTF 2023】crypto 部分

【TSGCTF 2023】crypto 部分

那些漫长的比赛终于都结束了&#xff0c;周末打下外国赛。国外好多东西还是比较新的。而且国内不久就会出现国外比赛的题。 比赛难度挺大&#xff0c;只作了几个简单的crypto小题&#xff0c;两个难的都看不懂 Unique Flag from Crypto.Util.number import getPrimep getPri…
阅读更多...
逆向学习记录（4）adb

逆向学习记录（4）adb

adb用于PC和手机端通讯。 常用命令如下&#xff1a; 如果不是模拟器&#xff08;模拟器一般都有自己的adb&#xff09;&#xff0c;adb会出现在Andirod的SDK中&#xff0c;路径为&#xff1a;Android/SDK/platform-tools。 最好加入环境变量中。
阅读更多...
最新文章

Copyright @ 2022~2023