Rxjs监听精确使用版本上线

目录
  • 导语
  • 思路
    • 注释掉一个触发条件
    • ...解构是2次，是不是这里导致的？
    • 那就是监听的地方，触发了2遍
  • 拓展：
    • You provided an invalid object
    • 解决办法
  • 总结

导语

最近在开发新feature，周五需要版本合并，上线。可是从DevTool Network请求记录来看，每次界面加载完毕，异步条件触发，filter api 都是调用2遍。

根据日志，定位带有嫌疑code位置。 code多请求一次，对服务器、用户体验都是不能接受的，版本是不可能上线的。

思路

问题可不可以本地复现？

可以,那就好办了

是不是，条件触发了2遍 ？

注释掉一个触发条件

# 留下的代码大致如下
private searchCondition$ = new Subject();
this.searchCondition$.next({
...(searchParam || {} )
...param,
});

...解构是2次，是不是这里导致的？

可是...解构代码是同步操作，之后才执行到next。多添加一个...试试，不过还是只有2次调用

 this.searchCondition$.next({
   ...(searchParam || {} )
   ...param,
   ...{a:1,}
 });

既然next异步触发不行，代码也不复杂，就重写直接同步调用

this.requestData({
   ...(searchParam || {} )
   ...param,
 });

经过测试，还是调用2次，那么问题就不是出现在发的地方

那就是监听的地方，触发了2遍

查看界面监听也就是subscribe()的地方

# 在html自定义组件中存在两处这样的代码
<cus-component [dataset]="dataset$ | async "> </cus-component>
# 这是ts监听地方
this.dataset$ = this.getDataLine(searchParam).pipe(
   switchMap((res) => {
       ...
       return of(res)
   }),
)

上述代码，通过注释掉一处html引用，编译后发现，调用次数变为1.故出现问题的代码就算定位到了。那么怎么fix？

修改代码，不监听http请求返回，直接把得到的数据返回给界面展示

 const sub = this.getDataLine(searchParam).pipe(
    tap((res) => {
        ...
        this.dataset$ = of(res)
    }),
 )
 //添加subscribe句柄管理，在component destory时候，销毁释放
 this.subs?.add(sub);

添加配置，屏蔽掉多次调用结果

//设置利用最后一次的值
 shareReplay(1)

拓展：

Expression Changed After Checked

原因：

只有开发环境才有，用于提示html绑定的变量多次修改了，界面还没来及更新。

解决办法：

  • 方法一：把code修改的地方，添加上setTimeout，延迟去刷新界面
  • 方法二： 针对code，改用Observable， html界面使用上async

You provided an invalid object

TypeError: You provided an invalid object where a stream was expected. 
You can provide an Observable, Promise, Array, or Iterable

可能原因：

最直接的从错误字面意思来，就是提供的对象，是一个不可用的对象，需要fix

解决办法

直接在报错的时候，debug，跳转到报错的位置，查看stack里面的内容，里面会清晰告诉你那里有错误。

常见的解决办法

  • 判定返回的对象是否undefined
  • 添加? or if等支持， 判定对象的方法调用,譬如 chart.draw() , chart不能为null，undefined.

总结

通过查看文档、debug，把控制台的错误一个个fix了，版本最终部署上线。出现错误，不要怕，不过上线上晚了，确实有点影响哈~ 。

到此这篇关于Rxjs监听精确使用版本上线的文章就介绍到这了,更多相关Rxjs监听版本上线内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • RxJS在TypeScript中的简单使用详解

    1. 安装 # 安装 typescript, rxjs 包 npm install -D typescript @types/node npm install rxjs 2. 使用 2.1 使用 from 来从数组生成源 RxJS 有许多创建源的方法,如 from, fromEvent..., 这里使用 from做个例子 import {from} from 'rxjs' // 从数组生成可订阅对象 // obser 的对象类型为 Observable let obser = from([1,2

  • 关于RxJS Subject的学习笔记

    Observer Pattern 观察者模式定义 观察者模式又叫发布订阅模式(Publish/Subscribe),它定义了一种一对多的关系,让多个观察者对象同时监听某一个主题对象,这个主题对象的状态发生变化时就会通知所有的观察者对象,使得它们能够自动更新自己. 我们可以使用日常生活中,期刊订阅的例子来形象地解释一下上面的概念.期刊订阅包含两个主要的角色:期刊出版方和订阅者,他们之间的关系如下: 期刊出版方 - 负责期刊的出版和发行工作 订阅者 - 只需执行订阅操作,新版的期刊发布后,就会主动收

  • 使用RxJS更优雅地进行定时请求详析

    使用RxJS更优雅地进行定时请求详析

    在用 Angular 做项目的时候,遇到了一个有点麻烦的问题.具体问题如下: 轮循请求某个接口,如何保证接口返回的数据与请求的顺序相同? 实际的业务场景是这样的:前端需要轮循请求后端接口获取文件处理进度,并在前端用进度条展示.如下方所示: 首先想到的肯定是使用 setTimeout 或者 setInterval 进行定时请求.然而结果有点诡异,进度条的变化不是递增,而是有快有慢,比如 30%,20%,50%,40%这样.仔细一想也知道问题出在哪,异步请求的结果并不是按顺序返回的. 我在之前的工作

  • Angular5升级RxJS到5.5.3报错：EmptyError: no elements in sequence的解决方法

    前言 RxJS是一种针对异步数据流编程工具,或者叫响应式扩展编程:可不管如何解释RxJS其目标就是异步编程,Angular引入RxJS为了就是让异步可控.更简单.可是最近在升级中遇到了一些问题,下面就来给大家介绍下,给同样遇到这个问题发朋友们一些参考,下面话不多说了,来一起看看详细的介绍吧. Angular 5.0.5升级RxJS到5.5.3报错: ERROR Error: Uncaught (in promise): EmptyError: no elements in sequence Em

  • RxJS的入门指引和初步应用

    前言 RxJS是一个强大的Reactive编程库,提供了强大的数据流组合与控制能力,但是其学习门槛一直很高,本次分享期望从一些特别的角度解读它在业务中的使用,而不是从API角度去讲解. RxJS简介 通常,对RxJS的解释会是这么一些东西,我们来分别看看它们的含义是什么. Reactive Lodash for events Observable Stream-based 什么是Reactive呢,一个比较直观的对比是这样的: 比如说,abc三个变量之间存在加法关系: a = b + c 在传统

  • Angular搜索场景中使用rxjs的操作符处理思路

    在有input输入框的搜索/过滤业务中,总会考虑如何减少发起请求频率,尽量使每次的请求都是有效的.节流和防抖是比较常见的做法,这类函数的实现方式也不难,不过终归还是需要自己封装.rxjs提供了各种操作符 , 可以很快捷高效的实现这些功能. 栗子 现在有一个查询场景,可以通过城市.类型.关键字来多维度过滤结果,如下图: 处理思路: 1.通过ngModel将select和input的值绑定到模型中的过滤条件对象 2.监听select输入框的change事件和input输入框的input事件来触发 发

  • Rxjs监听精确使用版本上线

    目录 导语 思路 注释掉一个触发条件 ...解构是2次,是不是这里导致的? 那就是监听的地方,触发了2遍 拓展: You provided an invalid object 解决办法 总结 导语 最近在开发新feature,周五需要版本合并,上线.可是从DevTool Network请求记录来看,每次界面加载完毕,异步条件触发,filter api 都是调用2遍. 根据日志,定位带有嫌疑code位置. code多请求一次,对服务器.用户体验都是不能接受的,版本是不可能上线的. 思路 问题可不可

  • android 监听网络状态的变化及实战的示例代码

    android 监听网络状态的变化及实战的示例代码

    平时我们在请求错误的情况下,通常会进行处理一下,一般来说,主要分为两方面的错误 没有网络的错误 在有网络的情况下,我们客户端的错误或者服务器端的错误 今天这篇博客主要阐述以下问题 怎样监听网络状态的变化,包括是否打开WiFi,否打开数据网络,当前连接的网络是否可用 网络没有打开情况下的处理,如弹出对话框,跳转到 打开 WiFi设置的界面等 非WiFi情况下是否加载图片,是否播放视频等 实现思路 在网络错误的情况下获取网络状态进行判断,这种方法是可行的,但你想过了没有,如果每次都要进行这样的判断,

  • Angular2监听页面大小变化的解决方法

    一.现象 全屏页面中的图表,在很多的时候需要 resize 一把,以适应页面的大小变化 二.解决 1.引入 : import { Observable } from 'rxjs'; 2.使用(在ngOnInit方法中): ngOnInit() { // 页面监听 Observable.fromEvent(window, 'resize') .debounceTime(100) // 以免频繁处理 .subscribe((event) => { // 这里处理页面变化时的操作 console.lo

  • Android中检查、监听电量和充电状态的方法

    当你在更改后台更新频率来减少这些更新对电池寿命的影响时,检查当前电量和充电状态是一个好的开始. 电池寿命通过剩余电量和充电状态来影响应用更新的执行.当用交流电充电时,执行更新操作对设备的影响是微不足道的,所以在大多数案例里,你可以把更新频率调到最快.如果设备不在充电,降低更新频率可以帮助延长电池寿命. 类似的,你可以检查电池剩余电量级别,在电量低时,应该降低更新频率甚至停止更新. 注:此处的更新,指的是类似发送心跳包的动作,或者定时更新内容.并非仅仅指更新应用版本.如果是用户动作,比如翻页刷新,

  • Linux下启动Oracle服务和监听程序步骤

    Linux下启动Oracle服务和监听程序启动和关闭步骤整理如下: 1.安装oracle: 2.创建oracle系统用户: 3./home/oracle下面的.bash_profile添加几个环境变量:ORACLE_SID,ORACLE_BASE,ORACLE_HOME: export ORACLE_SID=test export ORACLE_BASE=oracle_install_dir export ORACLE_HOME=xxx 4.启动步骤:注意$代表shell命令提示符,这里的ora

  • vue.js 1.x与2.0中js实时监听input值的变化

    vue.js 1.x与2.0中js实时监听input值的变化

    一.vuejs 2.0中js实时监听input 在2.0的版本中,vuejs把v-el 和 v-ref 合并为一个 ref 属性了,可以在组件实例中通过 $refs 来调用.这意味着 v-el:my-element 将写成这样: ref="myElement" , v-ref:my-component 变成了这样: ref="myComponent" .绑定在一般元素上时,ref 指DOM元素,绑定在组件上时,ref 为一组件实例. 因为 v-ref 不再是一个指令

  • js与jquery实时监听输入框值的oninput与onpropertychange方法

    本文实例讲述了js与jquery实时监听输入框值的oninput与onpropertychange方法.分享给大家供大家参考.具体如下: 最近做过一个项目,需求是下拉框里自动匹配关键字,具体细节是实时监听文本框 value 值的变化,然后匹配相关内容. 初接项目,首先想到的是 JQ 里的 change,但是马上排除此方法,因为 change 是在文本框失去焦点时才会触发.曲线救国一下,想到用 keydown 来解决.其他一切还好,只是当不通过键盘操作,而是通过鼠标来复制粘贴时,这个事件是无法触发

  • Laravel给生产环境添加监听事件（SQL日志监听）

    本文主要给大家介绍的是关于Laravel给生产环境添加监听事件(SQL日志监听)的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: laravel版本:5.2.* 一.创建监听器 php artisan make:listener QueryListener --event=Illuminate\\Database\\Events\\QueryExecuted or sudo /usr/local/bin/php artisan make:listener QueryListener

  • android中DownloadManager实现版本更新，监听下载进度实例

    android中DownloadManager实现版本更新，监听下载进度实例

    DownloadManager简介 DownloadManager是Android 2.3(API level 9)用系统服务(Service)的方式提供了DownloadManager来处理长时间的下载操作.它包含两个静态内部类DownloadManager.Query(用来查询下载信息)和DownloadManager.Request(用来请求一个下载). DownloadManager主要提供了下面几个方法: public long enqueue(Request request)把任务加

  • Android基于Glide v4.x的图片加载进度监听

    Glide是一款优秀的图片加载框架,简单的配置便可以使用起来,为开发者省下了很多的功夫.不过,它没有提供其加载图片进度的api,对于这样的需求,实现起来还真颇费一番周折. 尝试 遇到这个需求,第一反应是网上肯定有人实现过,不妨借鉴一下别人的经验. Glide加载图片实现进度条效果 可惜,这个实现是基于3.7版本的,4.0版本以上的glide改动比较大,using函数已经被移除了 using() The using() API was removed in Glide 4 to encourage

随机推荐