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!

推薦閱讀: