angular十天急速入门开发必备，迅速上手企业级项目（三）（RXJS）

最新推荐文章于 2024-04-17 17:53:46 发布
最新推荐文章于 2024-04-17 17:53:46 发布
阅读量290 收藏
点赞数 1
分类专栏： 前端基础 angular 文章标签： angular 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35094120/article/details/119532861
版权

Rxjs

Observable的用法

在这里插入图片描述
使用complete结束
在这里插入图片描述

subscribtion

取消订阅
http、async、pipe
在这里插入图片描述

Add 方法

在这里插入图片描述

Of的用法

在这里插入图片描述

From 的用法（数组）

在这里插入图片描述

fromEvent(绑定事件)

在这里插入图片描述
通过pipe管道处理event对象
在这里插入图片描述

Pipe(通道)

处理流
在这里插入图片描述使用take只取三次
在这里插入图片描述

Timer（相当于setInterval）

第一个参数是duration
第二个参数是间隔多少秒再发
在这里插入图片描述
Range
第一个参数是起始值
第二个是次数
如果只有一个参数就表示从0-end
在这里插入图片描述

combineLatest(多次最新)

直到每个 observable 都至少发出一个值后才会发出初始值，不过如果在等待其它流时又有最新流则使用最新的流
在这里插入图片描述

Zip（多次非最新）

每个流都发出一次后就会发出，相当于凑齐人就发车（关心每一次流）

Forkjoin(单次)

所有的流都结束了，发射最后一次的流，也是唯一一次

combineAll

合并所有流，3次高阶流完成后执行低阶流

在这里插入图片描述

Merge(同时执行两个流)

startWith和endWith

在这里插入图片描述
在流的开始和结尾添加值

withLatestForm

很快的点击会发出很多流，但是只会取最后一次的流
在这里插入图片描述

Buffer

收集流
在这里插入图片描述
在这里插入图片描述

bufferCount

收集流，超过一定次数发出

在这里插入图片描述
在这里插入图片描述
第二个参数是从上一轮哪个索引开始

在这里插入图片描述
在这里插入图片描述

bufferTime

缓存时间，缓存3秒再发射流
在这里插入图片描述

bufferToggle

在这里插入图片描述

bufferWhen

在这里插入图片描述

concatMap

处理值
在这里插入图片描述
在这里插入图片描述

concatMapTo

将发出的值更改为固定值
在这里插入图片描述

Exhaust

防抖
前面未执行完之前，一直点击会忽略

在这里插入图片描述

exhaustMap

相当于exhaust+map
在这里插入图片描述

Scan

Scan相当于reduce
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

Pairwise

生成两两组合的值
在这里插入图片描述
在这里插入图片描述

groupBy

分组
在这里插入图片描述
在这里插入图片描述

Pluck

获取属性值相当于获取item.id.age

在这里插入图片描述
在这里插入图片描述

switchMap（快速点击只执行一次）

每次都会取消里面的observable，不管是否执行完，

在这里插入图片描述
在这里插入图片描述

Empty(立即完成)

Audit

防抖
只会把最近的一次发出来

在这里插入图片描述
在这里插入图片描述

auditTime

在这里插入图片描述
相当于audit加定时器

DebounceTime

停下来后才会执行，会取消以前所有
在这里插入图片描述

Distinct

只会发没出现过的值
在这里插入图片描述
在这里插入图片描述
指定过滤
在这里插入图片描述

elementAt

获取指定索引的流
在这里插入图片描述

Filter

过滤流
在这里插入图片描述
在这里插入图片描述

Last

取最后一次

在这里插入图片描述
在这里插入图片描述

First

一次性点击

在这里插入图片描述
在这里插入图片描述

Sample

忽略源Observable的值，直到另一个Observable发出值，才推送源Observable的值

在这里插入图片描述
在这里插入图片描述
一开始不会打印定时器的值，直到点击document才会打印

sampleTime

指定发射时间
目标3秒发射一次才发射源值
在这里插入图片描述

Single

只能处理一个流，否则报错
在这里插入图片描述在这里插入图片描述

条件过滤

在这里插入图片描述
在这里插入图片描述

Skip

在这里插入图片描述
跳过前面5个值
在这里插入图片描述

skipLast

从后面开始忽略，忽略最后一个值
在这里插入图片描述
在这里插入图片描述

skipUntil

直到点击后才开始推送流，忽略前面发出的

在这里插入图片描述
在这里插入图片描述

skipWhile

条件忽略
小于5会忽略

在这里插入图片描述
在这里插入图片描述

Take

只取前面的5个流

在这里插入图片描述
在这里插入图片描述

takeLast

只取最后n个值

takeUntil

一直取源头上的值，直到点击截止

在这里插入图片描述

takeWhile

只取开始符合条件的，否则不会触发

在这里插入图片描述

throttleTime

节流

在这里插入图片描述
在这里插入图片描述

Leading

是否节流前触发

Trailing

是否节流后触发

在这里插入图片描述

错误处理

在这里插入图片描述
使用catchError捕获异常
在这里插入图片描述

Retry

重试几次
在这里插入图片描述

Delay

延迟
在这里插入图片描述

delayWhen

在这里插入图片描述

timeInterval

返回一个对象包括时间间隔

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

Timeout

超时报错
在这里插入图片描述

Count

计算发出几次流
在这里插入图片描述
在这里插入图片描述

Max

求最大值

在这里插入图片描述
在这里插入图片描述

findIndex

返回索引
在这里插入图片描述

Find

返回的是一个对象
在这里插入图片描述

Every

返回true或false

在这里插入图片描述

多播

subject

同时执行两个流

在这里插入图片描述
在这里插入图片描述
使用next方法
在这里插入图片描述
在这里插入图片描述

BehavorSubject

可以储存最新的一个值，有新的observor订阅会立马推送当前的最新值

在这里插入图片描述在这里插入图片描述
即使放后面也能订阅到

replySubject

订阅到最多前面一个值加后面所有值
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
设置缓存有效期

在这里插入图片描述

asyncSubject

结束后才推最后一个值
在这里插入图片描述

multicast

在这里插入图片描述
在这里插入图片描述

publishReply

缓存最新的两个值

在这里插入图片描述
在这里插入图片描述

publishLast

推送最后一个值

在这里插入图片描述

冷和热

冷

各自执行各自的

在这里插入图片描述
在这里插入图片描述

热

会共享前面的值
在这里插入图片描述
在这里插入图片描述

Young soul2
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Angular企业级开发——MVC之控制器详解
12-09
1.MVC中的控制器 AngularJS的控制器主要为了把模型和视图连接在一起。大多数业务逻辑操作都会放在视图对应的控制器中。当然如果我们能够把业务逻辑放到后端的REST服务中，就可以开发轻量级AngularJS应用。 涉及到多个控制器中使用的业务逻辑，需要放到一个公共的服务中，然后把改服务注入使用到该业务逻辑的控制器中。 2.理解控制器 在AngularJS的控制器中，构造函数会有$scope参数。当一个控制器通过ng-controller指令连接到DOM上，Angular将实例化一个新的控制器对象，然后调用指定的控制器的构造函数。一个新的子作用范围(scope)将被创建，并作为一种可注入的
Angualr使用 RxJS 中的switchMap 处理多个异步操作
weixin_43143467的博客
04-26 687
使用 RxJS 中的switchMap 处理多个异步操作提示：以下是本篇文章正文内容，下面案例可供参考。
angular使用 RxJS 中的switchMap和takeUntil实现接口防抖操作
林啾啾的博客
12-01 605
angular使用 RxJS 中的switchMap和takeUntil实现接口防抖操作。
RXJS：串联请求的使用
dongnihao的博客
11-03 601
from的作用：axios返回的是一个promise，我们需要一个可观察对象，所以需要。switchMap 总是会抛弃前一个请求的结果，concatMap不会。pluck的作用：选择属性来发出，主要是用来提取嵌套的属性。很常见的场景，先获取用户的Token再获取用户信息。最后打印出的是最后一个数据流发出的数据。操作符把promise转为可观察对象。也是创建了一个可观察对象。
Angular学习之旅----angular6数据请求rxjs(rxjs6)
瑞朋哥的博客
07-10 1567
需要用到请求数据的地方引入 Http 模块 Jsonp 模块，以及 rxjs RxJS 是一种针对异步数据流编程工具，或者叫响应式扩展编程；可不管如何解释 RxJS 其 目标就是异步编程，Angular 引入 RxJS 为了就是让异步可控、更简单。 大部分 RxJS 操作符都不包括在 Angular的 Observable 基本实现中，基本实现只包括 Angular 本身所需的功能。...
Angular之Rxjs基础操作
weixin_33851177的博客
06-04 2586
一 : 处理异步 (Observable) ① , 首先引入 import { Observable } from 'rxjs'; ② , 使用setTimeOut来模拟延迟 , 返回Observable对象句柄 var stream : Observable<string> = new Observable( observer => { setTimeout( ...
Angular 官网学习（二）—— RxJS
Lyrelion的博客
12-17 575
RxJS 提供的创建 Observable 的函数 承诺 promise： import { from } from 'rxjs'; // 创建可观察对象： const data = from(fetch('/api/endpoint')); // Observable 对象被订阅： data.subscribe({ next(response) { console.log(response); }, error(err) { console.error('Error: ' + err)...
80 行代码实现简易 RxJS
liusunquan123的博客
09-20 156
RxJS 是一个响应式的库，它接收从事件源发出的一个个事件，经过处理管道的层层处理之后，传入最终的接收者，这个处理管道是由操作符组成的，开发者只需要选择和组合操作符就能完成各种异步逻辑，极大简化了异步编程。我们通过 Observable 创建了一个事件源，每秒发出一个事件，这些事件会经过管道的处理再传递给 Observer，管道的组成是两个 map 操作符，对数据做了 + 1 和 * 10 的处理。此外，Observable 提供了取消订阅时的处理逻辑，当我们在 4.5s 取消订阅时，就可以清除定时器。
Angular 异步编程之（RxJs）初探
ChaITSimpleLove的博客
02-28 746
本节知识点是对【异步编程】的学习，首先我们来认识几个概念： 什么是异步和同步？ 同步的概念：执行一个方法或者功能，在没得到结果前，其他方法不执行，一定得等当前方法执行完，才会执行下一步骤； 异步的概念：执行一个方法或者功能，不需要等待到当前方法执行完，其他方法也可以执行； 同步比较符合我们常规思维，相对简单，容易理解接受，异步不会按规定格式（硬编码顺序）按步骤执行，执行无序，相对复杂，...
入门套件：用于企业级项目的Angular 11+入门套件
02-04
在几秒钟内快速启动项目，并专注于功能，而不关注框架或工具 工业级工具，可在连续集成环境和DevOps中使用 具有基本应用程序模板的可扩展架构，包括示例组件，服务和测试 入门 转到项目文件夹并安装依赖项： npm ...
angular-base是一个以angular5.21为基础的，帮助企业快速开发的种子项目
07-07
angular-base是一个以angular5.x为基础，帮助企业快速开发的种子项目。 整合jQuary、bootStrap等前端常用技术， 集成阿里，饿了么团队，谷歌等开箱即用的开源组件库， 同时支持手机、pc进行多种格式和多种协议视频...
浅谈Angular7 项目开发总结
10-17
主要介绍了浅谈Angular7 项目开发总结，本文在此做一次遇到问题的总结，以便知识的掌握，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
angular第三方包开发整理(小结)
08-27
本篇文章主要介绍了angular第三方包开发整理(小结)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
【Angular中的RxJS】- 常用操作符
老杨头的博客
01-09 2128
RxJS提供了很多操作符对数据流（Observable）进行操作控制。在【Angular中的RxJS】- 创建数据流一文中介绍了创建数据流的方法，相关操作符这里就不赘述了。本文只介绍常用的针对数据流中的数据和流整体的处理的操作符。 1、针对流数据的操作符 map 操作符 使用 map 操作符 对数据流中每次产生的数据进行处理，map(val: funcion(val: R):R)，代码示例： import{from,Observable}from...
RxJS中高阶操作符的全面讲解：switchMap，mergeMap，concatMap，exhaustMap
材女的进击
04-17 79
在更高阶映射中，我们不会简单地映射一个值比如说1到另外一个值比如说10，我们将把值映射进另外一个Observable中！结果是一个高阶Observable。它和其他可观察对象一样，只是它的值本身也是可观察对象，我们可以单独订阅。这可能听起来有些牵强，但事实上，这种类型的mapping一直都在发生。我们来给一个关于这种类型的mapping的实例。我们举例来说，我们有一个Angular反应式表单，它会通过一个Observable一直发送合法的表单值：})});12.ts。
(精华)2020年8月5日 Angular 异步数据流RxJS的使用
热门推荐
时光隧道
08-05 52万+
import { Component, OnInit } from '@angular/core'; import { CommonService } from '../../services/common.service'; import { Observable } from 'rxjs'; import { map, filter } from 'rxjs/operators'; @Component({ selector: 'app-home', templateUrl: './home
(精华2020年6月7日更新)Angular实战篇 异步数据流RxJS的使用
一点一滴
06-07 1万+
组件ts import { Component, OnInit } from '@angular/core'; import { CommonService } from '../../services/common.service'; import { Observable } from 'rxjs'; import { map, filter } from 'rxjs/operators'; @Component({ selector: 'app-home', templateUrl: '.
Angular学习笔记七之RxJs
weixin_45855469的博客
06-14 751
RxJs是一个专门用来处理异步操作的JavaScript库。可以将RxJs想象成面向事件的Lodash。RxJs库是以纯函数为基础的，因此特性强大、功能稳定。RxJs库拥有一整套在可观察者对象中控制事件流的算子，可以在事件流的各个阶段实现监听和控制。
用于企业级项目开发的前端开发框架
最新发布
05-26
目前，用于企业级项目开发的前端开发框架有很多种选择。其中比较流行的有Angular、React和Vue.js。 Angular是由Google开发的一款前端框架，它的特点是采用了TypeScript语言，支持组件化和模块化开发，以及强大的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Young soul2

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值