Rxjs監聽精確使用版本上線
導語
最近在開發新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監聽版本上線內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- JavaScript中rxjs與 Observable 兩大類操作符解析
- Rxjs map, mergeMap 和 switchMap 的區別與聯系
- Rxjs 中處理錯誤和抓取錯誤的代碼案例
- React 中使用 RxJS 優化數據流的處理方案
- 詳解angular中使用echarts地圖