Rxjs監聽精確使用版本上線

2022-08-07 14:02:00

導語

最近在開發新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監聽版本上線內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！