Rxjs 监听使用不精确,版本上线晚了3个小时

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第2天,点击查看活动详情

导语

最近在开发新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了,版本最终部署上线。出现错误,不要怕,不过上线上晚了,确实有点影响哈~ 。

猜你喜欢

转载自juejin.im/post/7128391769112182792
今日推荐